Member Avatar for constance.dobbins

Hi, I am a newbie to html. I have a project I am doing for school. Can someone take a look at my code and see what is wrong? After I put my answers in the form, my results will not populate. Any help appreciated

<html>
    <head>
         <title>
         My Fun Quiz - Constance Dobbins 
         </title>
         <script>
                 function getInputAsText(_id){return document.getElementById(_id).value}
                 function getInputAsNumber(_id){return parseFloat(document.getElementById(_id).value)}
                 function setOutput(_id, _value){document.getElementById(_id).value = _value}
                 function calculate ()
                 {
                     //declare variables
          var myAnswer1
          var myAnswer2
          var myAnswer3
          var myResult1
                        var myResult2
          var myResult3
                        var score

                     //get variable's value  
                        myAnswer1=getInputAsNumber ("myAnswer1")
          myAnswer2=getInputAsText ("myAnswer2")    
          myAnswer3=getInputAsText ("myAnswer3") 
          myResult1=getInputAsText ("myResult1")
          myResult2=getInputAsText ("myResult2")
          myResult3=getInputAsText ("myResult3")
          score=getInputAsNumber ("score")
          if (myAnswer1 == "8")
        {
           score = +1 
           myResult1 = "correct"
        }
        else
        {
          myResult1 = "WRONG! It's Eight"
        }

              if (myAnswer2.toLowercase() == "Apple".toLowerCase())
        {
          score = + 1 
          myResult2 = "correct"
        }
         else
        {
          myResult2 = "WRONG! It's Apple"
        }

              if (myAnswer3.toLowercase() == "Microsoft".toLowerCase())
        {
         score = + 1 
        myResult3 = "correct"
        }
         else
        {
         myResult3 = "WRONG! It's Microsoft"
        }

    //write output value
        setOutput ("myresultBox", myResult1)
        setOutput ("myresultBox", myResult2)
        setOutput ("myresultBox", myResult3)
        setOutput ("scoreBox", "Your total score is " + score + " out of 3")
               }
          </script>
   </head>

   <body>
    Instructions:<br>
    Answer all three questions and press go.<br>
    The total score will appear.<br><br>

    Input Values:<br>
    1. A byte is how many bits? <INPUT id= "myAnswer1Box"><br>  
    2. Steve Jobs heads what company?<INPUT id= "myAnswer2Box"><br>
    3. Bill Gates heads what company?<INPUT id= "myAnswer3Box"><br>
    <input type="submit"  Value="go" onclick="calculate()"><br><br>

    Output Value:<br>
    Result# 1:<INPUT id= "myResult1Box"><br>
    Result# 2:<INPUT id= "myResult2Box"><br>
    Result# 3:<INPUT id= "myResult3Box"><br>  
    Your score <INPUT id= "scoreBox">

   </body>
</html>
  • 2 Contributors
  • 1 Reply
  • 2K Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by pritaeas

Dani AI

Generated

Nice call by to use DevTools. If you open the Console you’ll see errors like “cannot read property ‘value’ of null,” which come from ID mismatches. In your script you read myAnswer1/myResult1, but your inputs are myAnswer1Box/myResult1Box. You also write three times to a non-existent myresultBox, use toLowercase (should be toLowerCase), reset the score with score = +1 instead of incrementing it, and compare a number to a string. Finally, there’s no need to read the result boxes before you write to them.

Here’s a minimal, drop-in fix that keeps your UI but corrects the logic and IDs. Also switch your Go control to type="button" so the page does not submit.

<script>
function calculate() {
  var a1 = parseFloat(document.getElementById('myAnswer1Box').value);
  var a2 = document.getElementById('myAnswer2Box').value.trim().toLowerCase();
  var a3 = document.getElementById('myAnswer3Box').value.trim().toLowerCase();
  var score = 0;

  var r1 = (a1 === 8) ? 'correct' : "WRONG! It's eight";
  if (a1 === 8) score++;

  var r2 = (a2 === 'apple') ? 'correct' : "WRONG! It's Apple";
  if (a2 === 'apple') score++;

  var r3 = (a3 === 'microsoft') ? 'correct' : "WRONG! It's Microsoft";
  if (a3 === 'microsoft') score++;

  document.getElementById('myResult1Box').value = r1;
  document.getElementById('myResult2Box').value = r2;
  document.getElementById('myResult3Box').value = r3;
  document.getElementById('scoreBox').value = 'Your total score is ' + score + ' out of 3';
}
</script>

Quick debugging workflow for next time (building on ’s tip): open DevTools, run the quiz once, and fix the first Console error. If you see “null,” check that the ID you read in JS exactly matches the element’s id in HTML. Then step through calculate() with a breakpoint and watch a1/a2/a3, r1/r2/r3, and score to confirm values change as expected.

Member Avatar for pritaeas

Try debugging your code with the browser tools. It's the best way to learn how to find the problem.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.