Question

我正在制作一个电源点，但我被卡住了。单击一个<input>时，我想更改变量。我试过这个：

HTML：

<input size="40">
<input size="40">

JAVASCRIPT：

inputClicked = false;
document.getElementsByTagName("INPUT").addEventListener("click", function() {
  inputClicked = true;
});

＆＃13;

var inputClicked = false;
document.getElementsByTagName("INPUT").addEventListener("click", function() {
       inputClicked = true;
       alert(inputClicked);
});

＆＃13;

<input>
<input>

＆＃13;

我运行这个隐藏的代码段，您会看到，当点击<input>时，不会弹出警告。请告诉我我的错误或其他方式......

Answer 1

使用focus代替click的好处是您可以使用Tab键。

document.querySelector('input').addEventListener('focus', function (event) {
  console.log(event.target)
}, false)

如果您要处理多个输入标记：

const inputs = Array.from(document.querySelectorAll('input'))

inputs.forEach(function (input) {
  input.addEventListener('focus', function (event) {
    console.log(event)
  }, false)
})

说明： document.querySelectorAll('input')返回一个不是数组的NodeList。 Array.from（）将NodeList转换为数组。

Answer 2

因为通过标记名称获得了一个元素数组，您需要遍历该数组并在每个元素上添加事件。如果使用jquery，则可以一次为多个元素分配事件。

你可以这样做：

javascript ：

var elements = document.getElementsByTagName("input")
for (i = 0;i<elements.length; i++){
  elements[i].addEventListener("click", function() {
    inputClicked = true; 
  });
}

jQuery ：

$("input").click(function(){
   inputClicked = true;
});

为什么我不能在这种情况下组合document.getElementsByTagName和.addEventListener？

2 个答案: