javascript document.getElementById循环

Question

我正在尝试打印出我创建的数组中的成绩。 我可以让我的for循环遍历数组中的所有成绩，但它只会打印出最后的成绩。 我设置了它，以便每次for循环完成一个周期时都打印出成绩，但是正如我所说的，它仅打印出最后一个成绩。 我也尝试使用.innerHTML但是那样也不起作用，正如您在代码中看到的那样：

 var arrayTest = [78, 65, 41, 99, 100, 81]; var arrayLength = arrayTest.length; var midtermTest = 60; var msg = ""; var grade; arrayOfGrades(); addBonus(); function tellGrade() { if (grade > 100) { msg = "Grade is higher than 100!, " + grade; } else if (grade >= 90) { msg = "You got an A " + grade + "!!, "; } else if (grade >= 80) { msg = "You got a B " + grade + "!!, "; } else if (grade >= 70) { msg = "You got a C " + grade + "!!, "; } else if (grade >= 60) { msg = "You got a D " + grade + "!!, "; } else if (grade <= 59) { msg = "You got a F " + grade + "!! :(, "; } else if (grade < 0) { msg = "Grade is less than 0, " + grade; } } function arrayOfGrades() { for (var i = 0; i < arrayLength; i++) { grade = arrayTest[i]; tellGrade(grade); writeGrade(); } } function addBonus() { midtermTest = midtermTest + (midtermTest * .05); grade = midtermTest; tellGrade(grade); writeMidtermGrade(); } function writeGrade() { //document.getElementById("test").innerHTML = "Test grade letter: " + msg.toString() + "<br />"; var el = document.getElementById('test'); el.textContent = "Test grade letter: " + msg.toString(); } function writeMidtermGrade() { var el = document.getElementById('midterm'); el.textContent = "Midterm test grade letter: " + msg.toString(); }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>DecisionsAndLoopsAssignment1_Byrd</title> <link href="css/default.css" rel="stylesheet" /> </head> <body> <div id="test">Missing grade!!</div> <div id="midterm">Missing grade!!</div> <script src="js/main.js"></script> </body> </html>

Answer 1

函数writeGrade（）会覆盖其输出到的元素中可能已经存在的所有内容。 因此，当多次调用时，仅保留最后一个值。 使用.innerHTML会做同样的事情。 解决此问题的一种方法是将内容字符串累积到单个var中，然后进行一次调用以输出它们。

我还注意到，您正在全局变量中传递临时值，这通常被认为是不良形式。

Answer 2

您正在设置元素的整个内容，而不仅仅是添加它。 这将不断覆盖循环的上一个迭代的工作，因此，您只会看到最后的结果，因为计算机运行很快。

您有两个选择，读取元素的textContent，然后继续添加。 这个概念称为自我分配。

var aMessage = "Hello, ";
aMessage += "World!";
console.log(aMessage") // => "Hello, World!"

虽然一般，我们将创建一个新元素并将该元素附加为子元素

 var msg = "A+"; // this should be a variable to our function vs a global va function writeGrade() { var el = document.getElementById('test'); var newEl = document.createElement("p"); newEl.textContent = "Test grade letter: " + msg.toString(); el.appendChild(newEl) } writeGrade()

 <div id="test"> </div>

javascript document.getElementById循环

问题描述

2 个解决方案

解决方案1
1 2017-04-12 23:24:16

解决方案2
0 已采纳 2017-04-12 23:24:28

javascript document.getElementById循环

问题描述

2 个解决方案

解决方案1 1 2017-04-12 23:24:16

解决方案2 0 已采纳 2017-04-12 23:24:28

解决方案1
1 2017-04-12 23:24:16

解决方案2
0 已采纳 2017-04-12 23:24:28