addEventListener not working

JavaScript
#1

This is done in codepen so I didnt include and tags ,but the issue is I am not getting the return statement message when I click the button.

<div class="butt">
<button class="bu">submit</button>
</div>

body{
  margin:0;
  padding:0;
  font-family:sans-serif;
}
button{
  font-size:40px;
  text-transform:uppercase;
  font-weight:700;
  background:none;
  outline:none;
}
.butt{
  display:flex;
  justify-content:center;
  align-items:center;
  height:120vh;
}


const bu = document.querySelector('.bu');
bu = window.addEventListener('click',() => {
  return 'Yes';
});
#2

You need to bind event listener to the query you made. E.g.

bu.addEventListener...

#3

I tried it, didnt work

#4

you can try document.addEventListener

#5

Try this:

bu.addEventListener('click', () => {
  return 'Yes';
});

You can replace return with console.log() depends on what you want to achieve, just check if button works or use this value somewhere else ?

#6

I double on what @icelandico said.
If I understand well and with my humble knowledge, what is happening in your code is that you defined bu (const bu) gave it a value (= document.querySelector('.bu'); but then you reassigned its value in the next line :bu = window.addEventListener('click',() => { return 'Yes'; });
Basically, bu became the function and you haven’t attached any event listener to it.

#7

^Well, it’s an TypeError, you can’t reassign a const.

const test = "test"
test = 'not going to work'
Uncaught TypeError: Assignment to constant variable.
2 Likes
#8