CODEWITHSUNDEEP
javascript
Daniel
Daniel

Reputation: 5

javascript document.getElementById Loop

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. 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. I also tried to use the .innerHTML but that did not work either as you will see in the code:

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>

Upvotes: 0

Views: 736

Answers (2)

rposborne
rposborne

Reputation: 802

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

Upvotes: 0

hanelyp
hanelyp

Reputation: 11

function writeGrade() overwrites whatever might already by in the elements it outputs to. So when called more than once only the last value is preserved. Using .innerHTML would do the same thing. Accumulating the content strings to a single var then making a single call to output them is one option to fix this.

I also note that you're passing temporary values around in global vars, which is generally considered poor form.

Upvotes: 1

Related Questions