Question

我正在尝试通过类名称从HTML文档中调用一组元素，据我所知，它们会以类似于数组的对象的形式返回。我想在for循环中循环访问此数组的值，但是即使我要调用的元素中肯定有一个值，循环也会为该数组中的每个值返回“未定义”。

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

年龄预测第1行：乔治，您好，您在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>

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

2 个答案: