Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript Loops, Arrays and Objects Tracking Multiple Items with Arrays Build a Quiz Challenge, Part 2

Taeho Kim
Taeho Kim
1,642 Points

Creating function for right and wrong questions? Keep getting result for one function!

I created two functions, for printing right questions and wrong questions. Can't seem to find any problems but only the wrong question results are popping out. Any help?

Thank you in advance!

'''javascript

var questions = [ ["How many states are there in the US?", 50], ["How many continents are there?", 7], ["How many legs does an insect have?", 6] ]; var correctAnswer = 0; var html; var question;

var rightQuestion = []; var wrongQuestion = [];

function print(message) { var outputDiv = document.getElementById('output'); outputDiv.innerHTML = message; }

function printRightQuestions(rightQ) { var listHTMLRight = "<p>These are the right questions</p><br>" + "<ol>"; for (var index = 0; index < rightQ.length; index += 1) { listHTMLRight += "<li>" + rightQ[index] + "</li>" } listHTMLRight += "</ol>" print(listHTMLRight); }

function printWrongQuestions(wrongQ) { var listHTMLWrong = "<p>These are the wrong questions</p><br>" + "<ol>"; for (var index = 0; index < wrongQ.length; index += 1) { listHTMLWrong += "<li>" + wrongQ[index] + "</li>" } listHTMLWrong += "</ol>" print(listHTMLWrong); }

for (var index = 0; index < questions.length; index += 1) { question = questions[index][0];

answer = prompt(question);
answer = parseInt(answer);

if (answer === questions[index][1]) {
    correctAnswer += 1;
    rightQuestion.push(question);
} else {
    wrongQuestion.push(question);
}

}

html = "You got " + correctAnswer + " question(s) right."; print(html);

printRightQuestions(rightQuestion); printWrongQuestions(wrongQuestion);

1 Answer

andren
andren
28,558 Points

Both functions run fine, the issue is that the print functions sets the div HTML to whatever is passed into it. So when printRightQuestions runs the HTML gets set to the message it generates, and when printWrongQuestions runs the existing HTML gets replaced with the message it generates.

Meaning that only the last function to call the print method will have its message shown on screen. This issue can be solved in a number of ways, the simplest is to change this line:

outputDiv.innerHTML = message;

To this:

outputDiv.innerHTML += message;

By using += you will add the message to the existing innerHTML content, instead of replacing it entirely.