pythonhelpthrow pythonhelpthrow - 3 months ago 12
CSS Question

Working on a trigonometry quiz website with HTML, CSS, Javascript, and I want to show % correct on the quiz but nothing displays

I have a JS method calculateScore() which is called when the user submits an answer so every time an answer is submitted, the score % is recalculated. However it stays at 0%. I'm displaying it with a paragraph tag set to 0% in HTML and then the JS used getElementById and innerHTML to set the

<p>
equal to the correct % however nothing is updated. If I try to call the method I get Uncaught TypeError: Cannot set property 'innerHTML' of null. If I set the div containing the
<p>
to have an onload that calls the method no information is updated. Does this mean I have to move the
<p>
above the submit button so that it isn't null when called? Sorry if the formatting is bad I'm new here.

Answer Source

You used dash "-" in your html id and low dash "_" in your JavaScript so you can't get the right element :

<li id="percentage-correct">Percentage: 0%</li>

document.getElementById("percentage_correct").innerHTML = "Percentage: " + Math.floor((numCorrect / numIncorrect) * 100) + "%";

Also if you want to calculate the percentage of success I think your calcul is incorrect : I will replace numIncorrect by numQuestions