javascript - 传递带参数的函数时未触发单击事件

Question

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

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>

先感谢您。

标签： javascripthtmldomeventsaddeventlistener

Answer 1

您应该searchString在.generate. 除非，您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>