Click event not triggering when passing function with argument

Question

Can anybody tell me why this click event won't trigger? The function seems to work fine (except printing out to HTML but I'll come back to that).

 function longestWordFunc(stringArg) { console.log(stringArg) var stringSplit = stringArg.split(" "); console.log(stringSplit) var longestWord = 0; for(var i = 0; i < stringSplit.length; i++){ if(stringSplit[i].length > longestWord){ longestWord = stringSplit[i].length; } longestWord = stringSplit[i]; }; console.log(longestWord) console.log(longestWord.length) document.getElementsByClassName("longestWord").innerHTML = longestWord; document.getElementsByClassName("longestWordCount").innerHTML = longestWord.length; }; let searchString = document.querySelector(".searchString").value; console.log(searchString); document.querySelector(".generate").addEventListener("click", longestWordFunc(searchString));

 <input type="text" name="searchString" class="searchString"> <span class="longestWord"></span> <span class="longestWordCount"></span> <button class="generate">Generate</button>

Thank you in advance.

Answer 1

You should define searchString inside the event listener of .generate . Unless, your searchString would be undefined as the user hasn't entered any string initially.

 function longestWordFunc(stringArg) { console.log(stringArg) var stringSplit = stringArg.split(" "); console.log(stringSplit) var longestWord = 0; for(var i = 0; i < stringSplit.length; i++){ if(stringSplit[i].length > longestWord){ longestWord = stringSplit[i].length; } longestWord = stringSplit[i]; }; console.log(longestWord) console.log(longestWord.length) document.getElementsByClassName("longestWord").innerHTML = longestWord; document.getElementsByClassName("longestWordCount").innerHTML = longestWord.length; }; document.querySelector(".generate").addEventListener("click", () => { let searchString = document.querySelector(".searchString").value; longestWordFunc(searchString); });

 <input type="text" name="searchString" class="searchString"> <span class="longestWord"></span> <span class="longestWordCount"></span> <button class="generate">Generate</button>

Answer 2

longestWordFunc(searchString) returns undefined , so this line:

document.querySelector(".generate").addEventListener("click", longestWordFunc(searchString));

is getting evaluated as:

document.querySelector(".generate").addEventListener("click", undefined);

And you're not setting anything as the click event listener.

I've fixed your snippet to work below:

 function longestWordFunc() { let stringArg = document.querySelector(".searchString").value; console.log(stringArg); var stringSplit = stringArg.split(" "); console.log(stringSplit); var longestWord = 0; for(var i = 0; i < stringSplit.length; i++){ if(stringSplit[i].length > longestWord){ longestWord = stringSplit[i].length; } longestWord = stringSplit[i]; }; console.log(longestWord); console.log(longestWord.length); document.getElementsByClassName("longestWord").innerHTML = longestWord; document.getElementsByClassName("longestWordCount").innerHTML = longestWord.length; }; document.querySelector(".generate").addEventListener("click", longestWordFunc);

 <input type="text" name="searchString" class="searchString"> <span class="longestWord"></span> <span class="longestWordCount"></span> <button class="generate">Generate</button>