javascript - 多个 onclick 按钮事件 Vanilla Javascript

Question

每当我的许多“li”标签之一被点击(不使用 jQuery)时，我想更改输入值。我在下面的 HTML 中列出了两个列表标记，我想在我的 if 语句中区分它们。我应该在 if 参数中放入什么来显示被点击的按钮 [0] 或按钮 [1]？

function myFunction() {
  var input = document.getElementById('values');
  var buttons = document.getElementsByTagName('li');
  if(buttons[0]) {
    input.value = 0;
  }
  else if(buttons[1]) {
    input.value += 1;
  }
}; 

HTML:

<div class="box">
  <input id="values" type="text" placeholder="2017">
  <ul>
    <li onclick="myFunction()" id="1">C</li>
    <li onclick="myFunction()" id="2">1</li>
  </ul>
</div>

Answer 1

两个错误。

首先，这是因为你的 if 语句检查 button[0] 和 button[1] 是否未定义。

由于定义了 button[0]，它永远不会达到您的第二个条件。因此，您的陈述与:

function myFunction() {
  var input = document.getElementById('values');
  var buttons = document.getElementsByTagName('li');
  if(buttons[0]) {
    input.value = 0;
  }
  // the second if else is redundant because buttons[0] is not undefined
};

其次，输入值是字符串，所以要递增，需要将其解析为整数。所以对于修复:

function myFunction(e) {
  var input = document.getElementById('values');
  var buttons = document.getElementsByTagName('li');
  if(buttons[0].id === e.target.id) {
    input.value = 0;
  }
  else if(buttons[1].id === e.target.id) {
    input.value = parseInt(input.value) + 1;
  }
}; 

并且您的 html 需要更改一点，因为该函数需要捕获点击事件:

<div class="box">
  <input id="values" type="text" placeholder="2017">
  <ul>
    <li onclick="myFunction(event)" id="1">C</li>
    <li onclick="myFunction(event)" id="2">1</li>
  </ul>
</div>