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 Basics (Retired) Making Decisions with Conditional Statements The Conditional Challenge Solution

Akash malhotra
Akash malhotra
3,025 Points
Posted by Akash malhotra
Akash malhotra
3,025 Points

Javascript simple quesiton game, update score

So I'm trying to update the score each time the person answers correctly. My code right now displays the correct score on the screen multiple times beside each other. How do I update it so that the score updates/replaces itself insted of being written multiple times beside each other? Should I just make a variable at the top and then document.write(variable) each time?

var counter=0;
var q1=prompt("what's your name?");

if (q1==='akash'){
  counter=counter+1;
  document.write('yay' + 'right: ' + counter+'/ 5');
}

var q2=parseInt(prompt("what's your age?"));

if (q2=='19'){
  counter=counter+1;
  document.write('yay' + 'right: ' + counter +'/ 5');
}
var q3=prompt("where do you live?")

if (q3=='canada'){
  counter=counter+1;
  document.write('yay' + 'right: ' + counter+'/ 5');
}
var q4=parseInt(prompt("weight?"));

if (q4=='180'){
  counter=counter+1;
  document.write('yay' + 'right: ' + counter+'/ 5');
}
var q5=prompt("fav song?")


if (q5=='rapgod'){
  counter=counter+1;
  document.write('yay' + 'right: ' + counter+'/ 5');
}

2 Answers

Gunhoo Yoon
Gunhoo Yoon
5,027 Points
Gunhoo Yoon
Gunhoo Yoon
5,027 Points

I'm just completely editing my answer

var counter=0;
var q1=prompt("what's your name?");

//Create element that will store your message.
var p = document.createElement('p')

if (q1==='akash'){
  counter=counter+1;
  p.innerHTML('yay right: ' + counter+ '/ 5');
}

var q2=parseInt(prompt("what's your age?"));

if (q2=='19'){
  counter=counter+1;
  p.innerHTML('yay right: ' + counter+ '/ 5');
}
var q3=prompt("where do you live?")

if (q3=='canada'){
  counter=counter+1;
  p.innerHTML('yay right: ' + counter+ '/ 5');
}
var q4=parseInt(prompt("weight?"));

if (q4=='180'){
  counter=counter+1;
  p.innerHTML('yay right: ' + counter+ '/ 5');
}
var q5=prompt("fav song?")


if (q5=='rapgod'){
  counter=counter+1;
  p.innerHTML('yay right: ' + counter+ '/ 5');
}
Akash malhotra
Akash malhotra
3,025 Points
Akash malhotra
Akash malhotra
3,025 Points

I'm trying to display score after each question is answered so the user sees howmany he/she got right as he continues to answer. Not just display the final at the end.

Gunhoo Yoon
Gunhoo Yoon
5,027 Points
Gunhoo Yoon
Gunhoo Yoon
5,027 Points

Then you can simply put score * counter on every winning condition.

//Sample
if (q1==='akash'){
  counter=counter+1;
  document.write('yay right: ' + counter+'/ 5' + 'Your current score: ' + counter * score);
}
Akash malhotra
Akash malhotra
3,025 Points
Akash malhotra
Akash malhotra
3,025 Points

I don't think I'm explaining my question right. So my program works fine and all, it's just that the "document.write('yay' + 'right: ' + counter+'/ 5');" prints out the correct score but multiple times right beside each other on the screen ,so something like this.

yay right: 1/5 yay right 2/5 yay right 3/5

I just want it to update so something like:
yay right 1/5 ----> turns into
yay right: 2/5----> turns into
yay right 3/5.

Gunhoo Yoon
Gunhoo Yoon
5,027 Points
Gunhoo Yoon
Gunhoo Yoon
5,027 Points

Oh sorry I wasn't reading correctly not your fault.

That's HTML markup issue. Try wrapping each feedback with p tag. I updated my answer so check it out.

Akash malhotra
Akash malhotra
3,025 Points
Akash malhotra
Akash malhotra
3,025 Points

SO that new code will UPDATE the score each time? Remember I don't want it to display multiple times, I just want it to turn from 1/5, straight to 2/5 and straight to 3/5 etc. So counter/5 should only be displayed once, but should be updated once user answers correctly?

Gunhoo Yoon
Gunhoo Yoon
5,027 Points
Gunhoo Yoon
Gunhoo Yoon
5,027 Points

That makes problem little trickier because you need to create p element and override the p element each time user gets right answer.

//Create p element
var p = document.createElement('p')

var counter=0;
var q1=prompt("what's your name?");

if (q1==='akash'){
  counter=counter+1;
  //Update content of p element you created
  p.innerHTML = 'yay right: ' + counter + '/ 5'
}
Akash malhotra
Akash malhotra
3,025 Points
Akash malhotra
Akash malhotra
3,025 Points

SO why can't we just use javascript instead of having to use Html. Like why can't we somehow update it with document.write?

Gunhoo Yoon
Gunhoo Yoon
5,027 Points
Gunhoo Yoon
Gunhoo Yoon
5,027 Points

Because browser relies on HTML and CSS to display structure and presentation of document. JavaScript is just interacting with DOM API to manipulate contents on web page. If you are curious read the history of development of web.

[https://www.youtube.com/watch?v=Fv9qT9joc0M] watch from 14:00

[http://www.w3.org/wiki/The_history_of_the_Web]