提交按鈕以調用功能

Question

當我單擊它的提交按鈕時，它什么也沒做。 我相信我的事件監聽器已正確建立。 關於為什么它什么都不做的任何想法？

JS文件

 document.getElementById("submitbutton").addEventListener("click", saveNames());
function saveNames() {
    var player1name = document.getElementById("player1").value;
    var player2name = document.getElementById("player2").value;
    var player3name = document.getElementById("player3").value;
    var player4name = document.getElementById("player4").value;
    var player5name = document.getElementById("player5").value;
    savePlayer(player1name);
    savePlayer(player2name);
    savePlayer(player3name);
    savePlayer(player4name);
    savePlayer(player5name);
    gameScreen(2);
  }

HTML檔案：

<input type="text"name="p1"><br>
<input type="text"name="p2"><br>
<input type="text"name="p3"><br>
<input type="text"name="p4"><br>
<input type="text"name="p5"><br>
<input id="submitbutton"type="submit" value="Submit">;

Answer 1

您沒有綁定到函數，而是綁定到了函數的結果 。 只要傳遞函數本身，就不要調用它。 （去掉括號）：

document.getElementById("submitbutton").addEventListener("click", saveNames);

為什么？

因為執行上面的那一行代碼時，如果您有錯誤的括號，那么它要做的第一件事就是執行 saveNames函數，以便將結果傳遞給addEventListener函數。 結果是undefined因為saveNames不返回任何內容。

大概也是，第一次調用saveNames函數顯然不會執行任何操作（盡管它確實執行了），因為當時輸入中還沒有任何值。

考慮一個人為的例子：

doSomething( doSomethingElse() )

這將執行doSomethingElse() ，然后將其返回的結果傳遞給doSomething() 。 添加事件偵聽器時也是如此，就像在調用其他函數一樣。

Answer 2

1. 像這樣添加偵聽器-

    document.getElementById("submitbutton").addEventListener("click", saveNames); 

請注意，我已在末尾刪除了（）。

2. 使用Id代替名稱。 您正在讀取具有ID的這些元素，則需要指定該元素。

3. 在名稱或類型之前輸入空格。

Answer 3

 //Remove the parenthese after "saveNames" - leaving them will call saveNames when it is encountered document.getElementById("submitbutton").addEventListener("click", saveNames); function saveNames() { //Use an array as it's neater var players = [ document.getElementById("player1").value, document.getElementById("player2").value, document.getElementById("player3").value, document.getElementById("player4").value, document.getElementById("player5").value ] //loop and save players.forEach(function(name) { if (name) { savePlayer(name); } }); //gameScreen(2); } function savePlayer(name) { console.log(`${name} saved.`); } 

 <input id="player1" type="text" name="p1"><br> <input id="player2" type="text" name="p2"><br> <input id="player3" type="text" name="p3"><br> <input id="player4" type="text" name="p4"><br> <input id="player5" type="text" name="p5"><br> <input id="submitbutton" type="button" value="Submit">