javascript document.getElementById循环

Question

I am trying to make this print out the grades in the array that I created. 我正在尝试打印出我创建的数组中的成绩。 I can get my for loop to cycle through all of the grades in the array but it only prints out the last grade. 我可以让我的for循环遍历数组中的所有成绩，但它只会打印出最后的成绩。 I have it set up to print the grade out each time the for loop completes one cycle, but as I said, it is only printing out the last grade. 我设置了它，以便每次for循环完成一个周期时都打印出成绩，但是正如我所说的，它仅打印出最后一个成绩。 I also tried to use the .innerHTML but that did not work either as you will see in the code: 我也尝试使用.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

function writeGrade() overwrites whatever might already by in the elements it outputs to. 函数writeGrade（）会覆盖其输出到的元素中可能已经存在的所有内容。 So when called more than once only the last value is preserved. 因此，当多次调用时，仅保留最后一个值。 Using .innerHTML would do the same thing. 使用.innerHTML会做同样的事情。 Accumulating the content strings to a single var then making a single call to output them is one option to fix this. 解决此问题的一种方法是将内容字符串累积到单个var中，然后进行一次调用以输出它们。

I also note that you're passing temporary values around in global vars, which is generally considered poor form. 我还注意到，您正在全局变量中传递临时值，这通常被认为是不良形式。

Answer 2

You are setting the ENTIRE content of the element not just adding on to it. 您正在设置元素的整个内容，而不仅仅是添加它。 This will constantly overwrite the work of the previous iteration of the loop, therefore you will only see the last result, cause computers are fast. 这将不断覆盖循环的上一个迭代的工作，因此，您只会看到最后的结果，因为计算机运行很快。

You have two options, read the textContent of the element, and continue adding to it. 您有两个选择，读取元素的textContent，然后继续添加。 This concept is called self assignment. 这个概念称为自我分配。

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

Though general we would create a new element and append that element as a child 虽然一般，我们将创建一个新元素并将该元素附加为子元素

 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