Question

我正在尝试通过js插入带有标签文本的span来创建基于用户输入的按钮标签。我所有按钮的ID都是sting格式的数字，所以id =＆＃34; 0＆＃34;，id =＆＃34; 1＆＃34;等等。

以下功能仅标记id =＆＃34; 0＆＃34;的第一个按钮。

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，＆＃34; 1＆＃34;或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的解决方案工作正常。

当ID是数字时，getElementById不起作用

2 个答案: