javascript simple quiz returning undefined

Question

I am using a tutorial that had me create an html form with an external javascript. When I click on a radio button, I'm supposed to get an alert with the value of the answer. Instead I get 'undefined' no matter which answer I click.

I put this on JSBin. https://jsbin.com/docavo/edit?html,js,output

In one attempt to solve I just grabbed the project files provided by the tutor and put that code into the JSBin fields, and got the same result.

So the code (and tutorial ) are wrong, but it works in the tutorial. What to do?

What environment are you running in? Works fine for me - Chrome v47.0.2526.106 m on Windows 10 — Alex McMillan, Dec 22 '15 at 02:54
code is work for me..can you provide the code which is not work for you? — pTi, Dec 22 '15 at 02:55
You need to actually click the `Run with JS` button in the output container to initialize the javascript. — chris_s, Dec 22 '15 at 02:55
http://stackoverflow.com/questions/9618504/get-radio-button-value-with-javascript ---check this out — pTi, Dec 22 '15 at 02:57
`document.forms['quizform']['q1'].value` actually *is* undefined, because `document.forms['quizform']['q1']` gives you a *list* of the four matching elements, and the list doesn't have a `value` property. It doesn't give you the value of whichever radio happens to be selected. — nnnnnn, Dec 22 '15 at 02:58
@AlexMcMillan - it's browser dependent. It works for me too in Chrome on my phone, but I'm certain it won't work - that is, will show undefined - in older IE (not sure about the latest IE). Actually it surprised me that it worked in Chrome. — nnnnnn, Dec 22 '15 at 03:22
Hi, did not work on chrome on my home computer but works now on my office computer. Doesn't work in Safari on either. Okay so it works, but I think a for loop like in pTi's link is a better way to go. I was just trying to follow the tutorial step by step. — Paeon, Dec 22 '15 at 18:43

zer00ne · Answer 1 · 2022-05-24T12:27:24.233

~~The form's ability to post is hindered by the sandboxed iframe for this snippet. If you want to see that function correctly, you can run it on your own site.~~ The quiz works.

What the commenters, pTi and n⁶ said I applied to this snippet.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Multiple Choice Quiz</title>
  <link href="http://glpjt.s3.amazonaws.com/_css/01.css" rel="stylesheet" />
  <style>
    iframe {
      border-radius: 8px;
      margin-top: 20px;
    }
    .ui {
      border-radius: 8px;
      max-width: 300px;
      border: 2px ridge #8cf;
      padding: 10px;
    }
    legend,
    figcaption {
      color: #8cf;
      font-size: 1.35rem;
      font-variant: small-caps;
    }
    #php {
      background: #fff;
    }
    dt {
      margin-top: 12px;
    }
  </style>
</head>

<body>
  <section id="ii">
    <form id="quizForm" name="quizForm" action="https://httpbin.org/post" target="php" method="post" onsubmit="submitAnswers();">

      <dl>
        <dt>1. In which HTML element do we put in JavaScript code?</dt>
        <dd>
          <input type="radio" name="q0" value="a" id="q0a" />a. &lt;js&gt;</dd>
        <dd>
          <input type="radio" name="q0" value="b" id="q0b" class="correct" />b. &lt;script&gt;</dd>
        <dd>
          <input type="radio" name="q0" value="c" id="q0c" />c. &lt;body&gt;</dd>
        <dd>
          <input type="radio" name="q0" value="d" id="q0d" />d. &lt;link&gt;</dd>
        <dt>2. Which HTML attribute is used to reference an external JavaScript file?</dt>
        <dd>
          <input type="radio" name="q1" value="a" id="q1a" class="correct" />a. src</dd>
        <dd>
          <input type="radio" name="q1" value="b" id="q1b" />b. rel</dd>
        <dd>
          <input type="radio" name="q1" value="c" id="q1c" />c. type</dd>
        <dd>
          <input type="radio" name="q1" value="d" id="q1d" />d. href</dd>
        <dt>3. How would you write "Hello" in an alert box?</dt>
        <dd>
          <input type="radio" name="q2" value="a" id="q2a" />a. msg("Hello");</dd>
        <dd>
          <input type="radio" name="q2" value="b" id="q2b" />b. alertBox("Hello");</dd>
        <dd>
          <input type="radio" name="q2" value="c" id="q2c" />c. document.write("Hello");</dd>
        <dd>
          <input type="radio" name="q2" value="d" id="q2d" class="correct" />d. alert("Hello");</dd>
        <dt>4. JavaScript is directly related to the "Java" programming language</dt>
        <dd>
          <input type="radio" name="q3" value="a" id="q3a" />a. True</dd>
        <dd>
          <input type="radio" name="q3" value="b" id="q3b" class="correct" />b. False</dd>
        <dt>5. A variable in JavaScript must start with which special character</dt>
        <dd>
          <input type="radio" name="q4" value="a" id="q4a" />a. @</dd>
        <dd>
          <input type="radio" name="q4" value="b" id="q4b" />b. $</dd>
        <dd>
          <input type="radio" name="q4" value="c" id="q4c" />c. #</dd>
        <dd>
          <input type="radio" name="q4" value="d" id="q4d" class="correct" />d. No Special Character</dd>
      </dl>
      <fieldset class="ui">
        <legend>Post Data to Server</legend>
        <input id="btn" type="submit" value="Submit" />
        <label for="results">&nbsp;&nbsp;&nbsp;Results:
          <output for="quizForm" id="results">0</output><span id="outOf"></span>
        </label>
      </fieldset>
    </form>
  </section>
  <figure>
    <figcaption>Data Received by Server</figcaption>
    <iframe id="php" name="php" src="http://examples.funwebdev.com/process.php" frameborder="2" scrolling="yes"></iframe>
  </figure>
  <footer>&nbsp;</footer>
  <script>
    function submitAnswers() {
      var res = document.getElementById('results');
      var keys = document.querySelectorAll('.correct');
      var total = keys.length;
      var score = 0;
      var outOf = document.getElementById('outOf');
      var keyArray = Array.prototype.slice.call(keys);
      for (var k = 0; k < total; k++) {
        var keyVal = keyArray[k].value;
        var ansVal = document.forms['quizForm']['q' + k].value;
        if (ansVal == keyVal) {
          score++;
        } else {
          continue;
        }
      }
      console.log('Score: ' + score);
      outOf.innerHTML = ' / ' + total;
      return res.value = score;
    }
  </script>
</body>

</html>

javascript simple quiz returning undefined

1 Answers1