传递带参数的函数时不触发单击事件

Question

谁能告诉我为什么这个点击事件不会触发？ 该function似乎工作正常（除了打印到 HTML，但我会回到那个）。

 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>

先感谢您。

Answer 1

您应该在.generate的事件侦听器中定义searchString 。 除非，您的searchString将是undefined因为用户最初没有输入任何字符串。

 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)返回undefined ，所以这一行：

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

被评估为：

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

而且您没有将任何内容设置为单击事件侦听器。

我已经修复了您的代码段，以便在下面工作：

 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>