Проблемы с использованием массива, созданного getElementsbyClassName в цикле for - PullRequest
Новая
       14

Проблемы с использованием массива, созданного getElementsbyClassName в цикле for

0 голосов
/ 07 июня 2019

Я пытаюсь вызвать набор элементов из документа HTML по имени класса, который, как я понимаю, возвращает их как объект, похожий на массив. Я хотел бы перебрать значения этого массива в цикле for, но цикл возвращает значение undefined для каждого значения в массиве, даже если в элементах, которые я вызываю, определенно есть значение.

В основном я хочу вывести на веб-страницу следующее, в несколько простых элементов div:

Строка прогнозирования возраста 1: Здравствуйте, Джордж, вам 201 год в 2019 году

Строка прогнозирования возраста 2: Привет, Энди, тебе 29 лет в 2020 году

Строка прогнозирования возраста 3: Привет, Кайл, тебе 20 в 2021

Строка прогнозирования возраста 4: Привет, Дженни, тебе 20 в 2022

Имена являются значениями элементов в классе "myinput". Я использую довольно стандартный цикл, как показано ниже: 

const years = [2019, 2020, 2021, 2022];

var name = document.getElementsByClassName("myinput");
var age = document.getElementById("agefield").value;

var intage = parseInt(age, 10);

for (i = 0; i < 4; i++) {
  document.getElementsByClassName("ageprediction")[i].innerHTML = "Age 
  prediction line " + (i+1) + ": ";
  document.getElementsByClassName("testdiv")[i].innerHTML = " Hello " + 
  name[i].value + " you are " + [intage+i] + " in " + years[i];
}

Существует только один элемент agefield, и вызов его по Id, добавление .value и преобразование в целое число работает нормально. Но после понимания и прочтения повсюду, что вы можете использовать подобный код для циклического перемещения по элементам массива getElementbyClass в цикле for с использованием текущего значения индекса, я все равно получаю «undefined» в качестве результата. Это потому, что имя [i] .value не правильный код?

ОБНОВЛЕНИЕ: Несколько человек попросили также посмотреть соответствующий HTML, вот он: 

<section id="form">

  <input class="myinput" value="George"/><br/><br/>
  <input class="myinput" value="Andy"/><br/><br/>
  <input class="myinput" value="Kyle"/><br/><br/>
  <input class="myinput" value="Jenny"/><br/><br/>

  <input id="agefield" placeholder="Your age" value="28"/><br/><br/>

  <div class ="ageprediction"></div><div class = "testdiv">Testing</div><br/><br/>
  <div class ="ageprediction"></div><div class = "testdiv">Testing</div><br/><br/>
  <div class ="ageprediction"></div><div class = "testdiv">Testing</div><br/><br/>
  <div class ="ageprediction"></div><div class = "testdiv">Testing</div><br/><br/>

</section>

Как вы видите, я сейчас использую предопределенные значения во входных данных для целей тестирования.

Ответы [ 2 ]

0 голосов
/ 07 июня 2019

Вы не можете повлиять на содержимое переменной с именем "name", содержимое будет автоматически преобразовано в строку:

window.name преобразует все значения в их строковые представления с помощью toStringmethod.

Из developer.mozilla

Это работает, если вы просто переименуете переменную 

const years = [2019, 2020, 2021, 2022];
 
	 var names = document.getElementsByClassName("myinput");
	console.log(names);
	var age = document.getElementById("agefield").value;

	var intage = parseInt(age, 10);

	for (i = 0; i < 4; i++) {

	  document.getElementsByClassName("ageprediction")[i].innerHTML = "Age prediction line " + (i+1) + ": ";
	  document.getElementsByClassName("testdiv")[i].innerHTML = " Hello " + names[i].value + " you are " + [intage+i] + " in " + years[i];
	}
<section id="form">

  <input class="myinput" value="George"/><br/><br/>
  <input class="myinput" value="Andy"/><br/><br/>
  <input class="myinput" value="Kyle"/><br/><br/>
  <input class="myinput" value="Jenny"/><br/><br/>

  <input id="agefield" placeholder="Your age" value="28"/><br/><br/>

  <div class ="ageprediction"></div><div class = "testdiv">Testing</div><br/><br/>
  <div class ="ageprediction"></div><div class = "testdiv">Testing</div><br/><br/>
  <div class ="ageprediction"></div><div class = "testdiv">Testing</div><br/><br/>
  <div class ="ageprediction"></div><div class = "testdiv">Testing</div><br/><br/>

</section>
0 голосов
/ 07 июня 2019

Это на самом деле работает. Проверьте эту ссылку: https://jsfiddle.net/dy0feLha

const years = [2019, 2020, 2021, 2022];

var name = document.getElementsByClassName("myinput");
var age = document.getElementById("agefield").value;

var intage = parseInt(age, 10);

for (i = 0; i < 4; i++) {
  document.getElementsByClassName("ageprediction")[i].innerHTML = "Age prediction line " + (i+1) + ": ";
  document.getElementsByClassName("testdiv")[i].innerHTML = " Hello " + 
  name[i].value + " you are " + [intage+i] + " in " + years[i];
}

Я просто изменил первую строку в цикле. Это должно быть в одной строке. Но это может быть уже то же самое в вашем редакторе кода.

...