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
Gaia Dragonfly
4,546 PointsUsing the getElementByID
So I was writing the last challenge in this section, and it worked perfectly fine. Once I changed the function 'print' to use element by id it stopped working correctly and now the print functions at the end got jumbled up and won't show correctly... help?
snapshot: https://w.trhou.se/n2sph7m0bt
the js code:
/******
functions
*****/
function print(message) {
var outputDiv = document.getElementById('output');
outputDiv.innerHTML = '<p>'+message+'</p>';
}
function question(position) {
return prompt( qAndA[position][0] );
}
/********
Variables
*********/
var qAndA;
var count = 0;
var rightAnswers = [];
var wrongAnswers = [];
var right = 0;
var answer;
/*********
Questions
**********/
qAndA = [
['What programming language you use to style web-pages?' , 'CSS'],
['What programming language you use to build web-pages?' , 'HTML'],
['What programming language you use to build interactive web-pages?' , 'JAVASCRIPT']
];
/*********
Loop through, did you answer correctly?
**********/
do {
answer = question(count);
if (answer.toUpperCase() === qAndA[count][1]) {
right ++;
rightAnswers.push(qAndA[count][0]);
} else {
wrongAnswers.push(qAndA[count][0]);
}
count++;
} while ( count < qAndA.length );
/***********
1. printing how many questions you got right
2. printing the questions you got right
3. printinh the questions you got wrong
************/
print('You got '+ right +' questions correct out of '+ count +' questions.');
print('The questions you got right are:');
document.write(rightAnswers.join('<br>'));
print('The questions you got wrong are:');
document.write(wrongAnswers.join('<br>'));
Gaia Dragonfly
4,546 PointsYe I did, there was no error. I forked the project again: https://teamtreehouse.com/workspaces/7785162 Is there anything else I can do so you can see it?
geoffrey
28,736 PointsYou just copied and pasted and the url of your workspace, we can't access it. What you need to do is clicking on the top right icon to "take a snapshot" (It's a small camera icon) of the workspace and then share the generated link. This way, we 'll see your code :).
Gaia Dragonfly
4,546 Pointsk this is it: https://w.trhou.se/n2sph7m0bt
(I really thought forking is opening your project, but now I understand it's duplicating it to another project. I feel silly :) )
2 Answers
geoffrey
28,736 PointsHey Gaia, I spotted the mistake you made. In fact you wrote correctly your print function, this one does what it asks, It changes the content with the innerHTML method of the element with the 'output' id.
The problem is there, everytime you call the function, the content of the output is replaced, It's not added to the previous content as you probably might have expected.
So as an example, if you call your the function in this order:
print(badAnswers);
print(goodAnswers);
Only the goodAnswers will be displayed as the last call to the print function is this one, even if there are bad answers.
If you were using JQuery, I would advice your for example to use the append()* method which reproduces the behaviour you wanted to create with your little project.
Anyway, here is way I managed it quickly
/******
functions
*****/
function print(message) {
document.getElementById('output').innerHTML = '<p>'+message+'</p>';
}
function question(position) {
return prompt( qAndA[position][0] );
}
/********
Variables
*********/
var qAndA;
var count = 0;
var rightAnswers = [];
var wrongAnswers = [];
var right = 0;
var answer;
/*I ADDED THIS VARIABLE*/
var completeMsg;
/*END*/
/*********
Questions
**********/
qAndA = [
['What programming language you use to style web-pages?' , 'CSS'],
['What programming language you use to build web-pages?' , 'HTML'],
['What programming language you use to build interactive web-pages?' , 'JAVASCRIPT']
];
/*********
Loop through, did you answer correctly?
**********/
do {
answer = question(count);
if (answer.toUpperCase() === qAndA[count][1]) {
right ++;
rightAnswers.push(qAndA[count][0]);
} else {
wrongAnswers.push(qAndA[count][0]);
}
count++;
} while ( count < qAndA.length );
/***********
1. printing how many questions you got right
2. printing the questions you got right
3. printinh the questions you got wrong
************/
/* I ADDED THIS */
var allRightAnswers = rightAnswers.toString();
var falseAnswers = wrongAnswers.toString();
completeMsg = 'You got '+ right +' questions correct out of '+ count +' questions.<br/>';
completeMsg += 'The questions you got right are: '+ allRightAnswers+'<br/>';
completeMsg +=' The questions you got wrong are: '+ falseAnswers+'<br/>';
print(completeMsg);
/*END OF ADDED CODE*/
Finally here is a snapshot to the modified workspace. Lastly, don't feel silly, you just needed to know about that :) !
Gaia Dragonfly
4,546 PointsThank you so much, this answer has been really helpful. I also learned about the toString() method, and it's always fun to discover new code-shortcuts :)
geoffrey
28,736 PointsNp, I'm glad to help when I can, as much as I appreciate go get some help when I'm stuck. Yes, It's a way to achieve what you want among many others ways.
MIke Allen
9,727 PointsHey Gaia,
Does it work if you don't declare the ID to a variable, like so?
document.getElementById("output").innerHTML = '<p>'+message+'</p>';
Cheers
Gaia Dragonfly
4,546 PointsThank you but it's still not working...
geoffrey
28,736 Pointsgeoffrey
28,736 PointsWe can't access your project with the link you gave. Fix it, I'll try to help you then. Also, have you checked your console to see if there was an error displayed ?