getElementById не работает, когда идентификаторы являются числами - PullRequest
Новая
       27

getElementById не работает, когда идентификаторы являются числами

0 голосов
/ 21 мая 2018

Я пытаюсь создать метки кнопок на основе пользовательского ввода, вставив диапазон с текстом метки через js.Идентификаторы всех моих кнопок - это числа в строковом формате, поэтому 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 ();без удачиЕсли я введу 0 в качестве идентификатора в document.getElementById, он пометит первую кнопку, но если я поставлю 1, 2 и т. Д., То не получится, введу ли я ее как 1, «1» или i.toString ();где я 1.

Я уверен, что это просто, и я просто что-то упускаю.

Ответы [ 2 ]

0 голосов
/ 21 мая 2018

Я понял это.Мне пришлось изменить идентификатор кнопки с id = "0", id = "1" и т. Д. На id = "btn0", id = "btn1" и т. Д. После того, как я это сделал, решение edh4131 заработало нормально.

0 голосов
/ 21 мая 2018

Я не уверен, правильно ли я читаю вопрос, извините, если это так.Для меня это звучит так, как будто у вас есть 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/

edit: spacing

...