文章/答案/技术大牛

发布

社区首页 >问答首页 >javascript document.getElementById循环

问javascript document.getElementById循环
EN

Stack Overflow用户

提问于 2017-04-12 23:12:55

回答 2查看 667关注 0票数 0

我试图在我创建的数组中打印出这个等级。我可以让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>

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-04-12 23:24:28

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

您有两个选项，读取元素的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>

票数 0

Stack Overflow用户

发布于 2017-04-12 23:24:16

函数writeGrade()覆盖它输出到的元素中可能已经包含的任何内容。因此，当多次调用时，只保留最后一个值。使用.innerHTML也会做同样的事情。将内容字符串累加到单个变量，然后进行一个调用以输出它们，这是解决这个问题的一个选项。

我还注意到，在全局vars中传递临时值，这通常被认为是糟糕的形式。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43381067

复制

相似问题

问javascript document.getElementById循环
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript document.getElementById循环EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript document.getElementById循环
EN