ID为数字时，getElementById不起作用

Question

我试图通过用户输入通过js在标签文本中插入一个跨度来创建按钮标签。 我所有按钮的ID都是字符串形式的数字，因此id =“ 0”，id =“ 1”等。

以下功能仅将第一个按钮标记为id =“ 0”。

gearInputs = document.getElementsByClassName('Box');

for (i=0; i<gearInputs.length; i++) {
var gearName = gearInputs[i].value,
  gearButton = document.getElementById(i);
  if(gearName && gearName != ''){
    gearButton.innerHTML = '<span class="resultsButtons">' + gearName +  '</span>';
  }

}

我的按钮：

<button id="0" class="buttonshowHide" onclick="showHide(this.id)"></button>

我的输入框：

<input placeholder="Enter Camera/Lens Model" class="Box" type="text" id="gearInput1"/>

我也尝试过i.toString（）; 没有运气。 如果我在document.getElementById中输入0作为id，它将标记第一个按钮，但是如果我输入1、2等，则无论我将其输入为1，“ 1”还是i.toString（）都会失败。 我在哪里1。

我确信这很简单，我只是忽略了一些东西。

Answer 1

我不确定我是否读错了这个问题，请原谅。 在我看来，您具有这样的html元素：

<input class="gearInput" id ="gearInput0" value="test1">
<input class="gearInput" id ="gearInput1" value="test2">
<input class="gearInput" id ="gearInput2" value="test3">

<button class="someClass" id="0"> </button>
<button class="someClass" id="1"> </button>
<button class="someClass" id="2"> </button>

并且您希望此函数的输出为：

<button class="someClass" id="0"> test1 </button>
<button class="someClass" id="1"> test2 </button>
<button class="someClass" id="2"> test3 </button>

等等。 数组spanHtml是无用的，因为它总是只包含一项，因为您在循环的每个块中都将其清除了。 除非您将其用于其他功能，否则也不需要gearNames数组。

我会做这样的事情：

gearInputs = document.getElementsByClassName('gearInput');

for (i=0; i < gearInputs.length; i++){
var gearName = gearInputs[i].value,
    gearButton = document.getElementById(i);
    if(gearName && gearName != ''){
    gearButton.innerHTML = '<span class="resultsButtons">' + gearName + '</span>'; 
 }
}

如果您只是在乎if块，只是确保它们在输入中输入了一个值，则将其删除。

这是什么样子。 希望这可以帮助。

https://jsfiddle.net/edh4131/70v551qp/

编辑：间距

Answer 2

我想通了。 我必须将按钮id从id =“ 0”，id =“ 1”等更改为id =“ btn0”，id =“ btn1”等。完成后，edh4131的解决方案可以正常工作。