将参数传递给JavaScript中的事件监听器函数

Question

Hello I have some code in which I take user input through in html and assign it to,two global variables

 var spursscoref = document.getElementById("spursscore").value;
 var livscoref = document.getElementById("livscore").value;

Which next show up in this addeventlistener function as parameters of the whowon function

var d = document.querySelector("#gut2");
d.addEventListener("click", function () {
whowon(spursscoref, livscoref, spurs, liverpool)
}, false);

The click event is meant to trigger the whowon function and pass in the parameters

function whowon(FirstScore, SecondScore, FirstTeam, SecondTeam) {

if (FirstScore > SecondScore) {

    FirstTeam.win();
    SecondTeam.lose();


} else if (FirstScore < SecondScore) {

    SecondTeam.win();


} else {

    FirstTeam.draw();
    SecondTeam.draw();
}

}

However the values are null,as I get a cannot read properties of null error on this line

var spursscoref = document.getElementById("spursscore").value;

I am pretty sure the problem is coming from the addlistener function,any help would be appreciated

Answer 1

Well you could do something like this -

$( document ).ready(function() {     

var d = document.querySelector("#gut2");
d.addEventListener("click", function () {
  var spursscoref = document.getElementById("spursscore").value;
  var livscoref = document.getElementById("livscore").value;
  whowon(spursscoref, livscoref, spurs, liverpool)
  }, false);

});

Wrap your code in $(document).ready(function(){}). This will ensure that all of your DOM elements are loaded prior to executing your Javascript code.

Answer 2

Try putting all of your code inside this

document.addEventListener("DOMContentLoaded", function(event) {

   //Your code here

});

My guess is that your code is executed before the html actually finished loading, causing it to return null.