Object not defined when eventlistener i triggered

Question

<!DOCTYPE html>
<html>
<head>
<style>
span {
  font-family:Verdana, Arial, sans-serif;
  font-size:14px;
}  
span:hover {
  display: fit-content;
  background-color: lightgrey;
  cursor:pointer;
}
</style>
</head>
<body>
<span>3.1415</span>
</body>
<script>
  function setBckCol(col) {
    this.style.backgroundColor = col;
  }
  function setSpanListeners() {
    var spans = document.querySelectorAll('span');
    for(var i = 0; i < spans.length ;i++) {
      spans[i].addEventListener('click', setBckCol('#F9E79F'));                    
    }
 }
const nodeList = document.querySelectorAll("span");
for (i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}
setSpanListeners();
</script>
</html>

I am getting the error message in Chrome developer tools when executing the script. The error refers to line 21, see the attached image.

Seems "this" is not passed to the setBckCol function. How to correct it?

Thanks. I was put off by this response: https://stackoverflow.com/questions/12024483/how-to-pass-parameter-to-function-using-in-addeventlistener — Svea, Sep 27 '22 at 18:27

score 1 · Accepted Answer · answered Sep 27 '22 at 16:42

you are only passing color to the setbckcol setBckCol('#F9E79F') instead you have to pass the element & the color.setBckCol(spans[i],'#F9E79F').

also have to collect both of them function setBckCol(el,col)

function setBckCol(el,col) {
  el.style.backgroundColor = col;
}

function setSpanListeners() {
  var spans = document.querySelectorAll('span');
  for (var i = 0; i < spans.length; i++) {
    spans[i].addEventListener('click', setBckCol(spans[i],'#F9E79F'));
  }
}
const nodeList = document.querySelectorAll("span");
for (i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}
setSpanListeners();

span {
  font-family: Verdana, Arial, sans-serif;
  font-size: 14px;
}

span:hover {
  display: fit-content;
  background-color: lightgrey;
  cursor: pointer;
}

<body>
  <span>3.1415</span>
  <span>3.1415</span>
</body>
>

Object not defined when eventlistener i triggered

1 Answers1