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

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>

Answer 2

您应该在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>

通过参数传递函数时，Click事件未触发

2 个答案: