Question

使用.innerHTML用输入替换按钮后，如果我单击两个箭头，数字都不会改变其值。

您能解释一下为什么第二个输入正常工作，但是javascript中的第二个却不能正常工作吗？

const resetButton = document.getElementById("reset-btn");
resetButton.addEventListener('click', function(){
document.getElementById("reset-btn").innerHTML = '<input id="number" type="number" style="width:50px">';
});

<button id="reset-btn">Change Table Nr.</button> 
<input id="number" type="number" style="width:50px">

Answer 1

原因是您已将数字字段放在按钮内。取而代之的是，将按钮和文本字段都放在div内，然后隐藏按钮。

Answer 2

如注释中所述，单击输入按钮时，还单击包含输入的按钮。然后脚本将替换按钮的内容。

这就是为什么您会得到这种行为。

const resetButton = document.getElementById("reset-btn");

resetButton.addEventListener('click', function(event) {
  if (event.target !== event.currentTarget) return; // ignore clicks that bubbled up (from the input)
  
  resetButton.innerHTML = '<input id="number" type="number" style="width:50px">';
});

<button id="reset-btn">Change Table Nr.</button>
<input id="number" type="number" style="width:50px">

为什么箭头对我使用过innerHTML的输入类型编号无效？

2 个答案: