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

您没有绑定到函数，而是绑定到了函数的 result 。只要传递函数本身，就不要调用它。（去掉括号）：

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

为什么？

由于上面的一行代码执行时，如果您有错误的括号，那么 first 的作用就是依次执行saveNames函数{em> 获得结果并传递给addEventListener函数。结果是undefined，因为saveNames不返回任何内容。

大概也是，saveNames函数的第一次调用显然没有执行任何操作（尽管它确实执行了），因为当时输入中还没有值。

考虑一个人为的示例：

doSomething( doSomethingElse() )

这将执行doSomethingElse()，然后将其返回的结果传递给doSomething()。添加事件侦听器时也是如此，就像在调用其他函数一样。

Answer 2

像这样添加侦听器-

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

请注意，我在末尾删除了（）。

使用ID代替名称。您正在读取具有ID的这些元素，则需要指定该元素。
在名称或类型前输入空格。

Answer 3

<v-text-field v-model="ticksLabels[value]"
              class="mt-0"
              type="text"></v-text-field>

<v-card-text>
  <v-slider v-model="value"
            :tick-labels="ticksLabels"
            :max="4"
            step="1"
            ticks="always"
            tick-size="2"></v-slider>

//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.`);
}

提交按钮以调用功能

3 个答案: