在 for 循环中使用由 getElementsbyClassName 创建的数组的问题

Question

我正在尝试按类名从 HTML 文档中调用一组元素，据我所知，这会将它们作为类似数组的对象返回。我想在 for 循环中循环遍历该数组的值，但循环为数组中的每个值返回“未定义”，即使我正在调用的元素中肯定有一个值。

我基本上想将以下内容输出到网页上，变成一些简单的 div 元素：

年龄预测线 1：你好 George，2019 年你 28 岁

年龄预测线 2：你好安迪，2020 年你 29 岁

年龄预测线 3：你好凯尔，2021 年你 30 岁

年龄预测线 4：你好珍妮，2022 年你 31 岁

名称是“myinput”类中元素的值。我正在使用一个非常标准的 for 循环，如下所示：

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 并转换为整数可以正常工作。但是在理解和阅读所有地方之后，您可以使用这样的代码使用当前索引值在 for 循环中循环遍历 getElementbyClass 数组的元素，结果我仍然得到“未定义”。这是因为 name[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>

如您所见，我现在只是在输入中使用预定义的值来进行测试。

Answer 1

确实有效。看看这个链接：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];
}

我只是更改了循环中的第一行。它必须在同一行。但它可能在您的代码编辑器中已经相同。

Answer 2

您不能将内容影响到名为“name”的变量，内容将自动转换为字符串：

window.name 将通过以下方式将所有值转换为其字符串表示形式 使用 toString 方法。

From 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>