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

Posted 2023-05-07

【中文标题】当 ID 是数字时，getElementById 不起作用

【英文标题】：getElementById not working when ID's are numbers

【发布时间】：2018-10-30 15:18:58

【问题描述】：

我正在尝试通过 js 插入带有标签文本的跨度来根据用户输入创建按钮标签。我所有按钮的 id 都是 sting 格式的数字，所以 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。

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

【问题讨论】：

我认为你的 for 循环不正确。猜猜应该是for (i=0; i<searchBoxes; ++i)

我认为问题在于 HTML 元素 id 不能只是一个数字，而必须以字母 ***.com/questions/70579/… 开头。

@StevenLambert 用于 HTML5 之前和 HTML4 之前的标记。它在 HTML5 的规范中所说的一切都应该是唯一的并且没有空格 (w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute)。 ID 为 number 的元素应该可以正常工作。这是一个示例jsfiddle.net/k7qu2dxu

@keysl 哇，我已经用了很久了。我不知道他们更新了它。谢谢！

据我所知，您的代码似乎没有问题。您能否发布一些您的 HTML 代码，也许是某个地方的问题？

【参考方案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/

编辑：间距

【讨论】：

首先感谢您的深入回复。我实现了您的解决方案，但它仍然只适用于第一个按钮。我将使用相关代码编辑我的第一篇文章。

如果您还可以放置 html 或它的示例，那么您正在使用 javascript 进行操作会很有帮助。

@user881667 你看小提琴了吗？那行得通，但如果你的不是，我认为gearInputs 数组不正确。如果您愿意，我们可以在 jsfiddle 中协作处理您的代码，我可以实时向您展示正确的解决方案，请告诉我，我会将协作链接放到我的小提琴中。

@user881667 我用我能想到的一切更新了小提琴：jsfiddle.net/edh4131/70v551qp

你帮了大忙。我了解您的示例及其非常接近我正在做的事情。最终结果正是我所需要的。出于某种原因，尽管当我将您的代码应用于我的代码时，它仍然只适用于第一个按钮。没有其他按钮被标记。我正在通过下拉选择框动态创建我的输入字段。用户可以选择他们需要多少个输入字段。我想知道问题是否存在，但我不这么认为，因为在按钮标签函数请求它们的类或 id 之前，输入字段被插入到 DOM 中。你的例子很有帮助。

【参考方案2】：

我想通了。我不得不将按钮 id 从 id="0"、id="1" 等更改为 id="btn0"、id="btn1" 等。在我这样做之后，edh4131 的解决方案运行良好。