0

I'm making a quiz where choosing certain answers will add that answers assigned value to the sum and at the end the sum will be compared against predefined guidelines and you will be given a character based on this sum value.

My problem is that when I use console.log(sum); to test my sum value for recording inputs correctly it is recording them as undefined12323121 (where the numbers are the point values).

It should just be one number at the end but is instead storing them like it's a string.

My quiz is 10 question with 3 potential answers each where in order of answer the value is 1,2,3. I was using inputs[i].value to sum+= the value at each answer to get the total at the end.

The output for the quiz's sum in the console is undefined and then the point values rather than the sum of those values, the picture linked has my source code.

<html>


    <head>
        <title>Which Star Wars Character Are You?</title>
    </head>
    <style>
    body {
    background-color: #0000ff ;
    }

    h1 {
    color: black;
    text-align: center;
    }

    p {
    font-family: "Arial";
    font-size: 25px;
    text-align: center;
    }
    .house {
    max-width: 200px;
    width: 100%;
    }



    </style>
    <h1>Which Star Wars Character Are You?</h1>
<form>
What color is your Lightsaber?
    <br><input type="radio" name="lightsaber" id="red" value="1"> <label     for="red">Red</label> 
    <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">Blue</label> 
    <br><input type="radio" name="lightsaber" id="purple" value="3"> <label     for="purple">Purple</label> 
</form>

<form>
With which organization would you most likely aligned?



    <br><input type="radio" name="lightsaber" id="red" value="1"> <label     for="red">Empire</label> 
    <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">Rebel Alliance</label> 
    <br><input type="radio" name="lightsaber" id="purple" value="3"> <label     for="purple">Neither</label> 

    </form>

<form>
Do you submit to the Emperor's will?


    <br><input type="radio" name="lightsaber" id="red" value="1"> <label     for="red">Yes</label> 
    <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">No</label> 
    <br><input type="radio" name="lightsaber" id="purple" value="3"> <label     for="purple">Maybe</label> 

    </form>

<form>
Would you help a friend if it meant being sealed in carbonite?


    <br><input type="radio" name="lightsaber" id="red" value="1"> <label     for="red">No of course not</label> 
    <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">Yes, I want to save my friends</label> 
    <br><input type="radio" name="lightsaber" id="purple" value="3"> <label     for="purple">Depends on the friend</label> 

    </form>

<form>
Do you like Wookies?


    <br><input type="radio" name="lightsaber" id="red" value="1"> <label     for="red">Only as a tool to crush my enemies</label> 
    <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">Yes I consider the creatures as friends</label> 
    <br><input type="radio" name="lightsaber" id="purple" value="3"> <label     for="purple">I've met a few good Wookies in my time, a few hostile ones     too</label> 

    </form>

<form>
Would you ever construct a Droid Army to usurp the Empire's power?


    <br><input type="radio" name="lightsaber" id="red" value="1"> <label     for="red">No, the Empire must be upheld, always</label> 
    <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">No, using an Army of Droids would make us just as bad</label> 
    <br><input type="radio" name="lightsaber" id="purple" value="3"> <label     for="purple">Yes, absolutely</label> 

    </form>

<form>
Jar Jar Binks yay or nay?


    <br><input type="radio" name="lightsaber" id="red" value="1"> <label     for="red">Yay</label> 
    <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">My father liked Jar Jar</label> 
    <br><input type="radio" name="lightsaber" id="purple" value="3"> <label     for="purple">Nay, a thousand times, Nay</label> 

    </form>

<form>
Have you seen the Mr. Plinkett Star Wars Reviews?


    <br><input type="radio" name="lightsaber" id="red" value="1"> <label     for="red">No</label> 
    <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">I've heard of them</label> 
    <br><input type="radio" name="lightsaber" id="purple" value="3"> <label     for="purple">Yes, he is right on all points raised</label> 

    </form>

<form>
Would you build a DeathStar or something like it to assert dominance over the Galaxy?


    <br><input type="radio" name="lightsaber" id="red" value="1"> <label     for="red">Yes, maybe even 2 times</label> 
    <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">No, the DeathStar is a war machine that must be destroyed</label> 
    <br><input type="radio" name="lightsaber" id="purple" value="3"> <label     for="purple">I would possible use such a machine or vessel for my goals</label> 

    </form>

<form>
Did you like/know of KOTOR 1 or 2


    <br><input type="radio" name="lightsaber" id="red" value="1"> <label     for="red">No</label> 
    <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">Yes</label> 
    <br><input type="radio" name="lightsaber" id="purple" value="3"> <label     for="purple">I liked KOTO2 but KOTOR 1 had a lame ending.</label> 



<br><br><input type="button" id="qButton" value="Choose">
</form>
<p id="QuestionParagraph"></p>

<script>




function getButton() {
var button = document.getElementById('qButton');
button.onclick = getResult;
}

function getResult(){

var sum;
var inputs = document.getElementsByName('lightsaber');
for (i=0;i<inputs.length;i++){
    if (inputs[i].checked) {
    sum += inputs[i].value;
    console.log(sum);

        }
    }
}

window.onload = getButton;
</script>       
</html>


function getButton() {
  var button = document.getElementById('qButton');
  button.onclick = getResult;
}

function getResult() {

  var sum;
  var inputs = document.getElementsByName('lightsaber');
  for (i = 0; i < inputs.length; i++) {
    if (inputs[i].checked) {
      sum += inputs[i].value;
      console.log(sum);

    }
  }
}

window.onload = getButton;
body {
  background-color: #fff;
}
h1 {
  color: black;
  text-align: center;
}
p {
  font-family: "Arial";
  font-size: 25px;
  text-align: center;
}
.house {
  max-width: 200px;
  width: 100%;
}
 <h1>Which Star Wars Character Are You?</h1>
<form>
  What color is your Lightsaber?
  <br>
  <input type="radio" name="lightsaber" id="red" value="1">
  <label for="red">Red</label>
  <br>
  <input type="radio" name="lightsaber" id="blue" value="2">
  <label for="blue">Blue</label>
  <br>
  <input type="radio" name="lightsaber" id="purple" value="3">
  <label for="purple">Purple</label>
</form>

<form>
  With which organization would you most likely aligned?



  <br>
  <input type="radio" name="lightsaber" id="red" value="1">
  <label for="red">Empire</label>
  <br>
  <input type="radio" name="lightsaber" id="blue" value="2">
  <label for="blue">Rebel Alliance</label>
  <br>
  <input type="radio" name="lightsaber" id="purple" value="3">
  <label for="purple">Neither</label>

</form>

<form>
  Do you submit to the Emperor's will?


  <br>
  <input type="radio" name="lightsaber" id="red" value="1">
  <label for="red">Yes</label>
  <br>
  <input type="radio" name="lightsaber" id="blue" value="2">
  <label for="blue">No</label>
  <br>
  <input type="radio" name="lightsaber" id="purple" value="3">
  <label for="purple">Maybe</label>

</form>

<form>
  Would you help a friend if it meant being sealed in carbonite?


  <br>
  <input type="radio" name="lightsaber" id="red" value="1">
  <label for="red">No of course not</label>
  <br>
  <input type="radio" name="lightsaber" id="blue" value="2">
  <label for="blue">Yes, I want to save my friends</label>
  <br>
  <input type="radio" name="lightsaber" id="purple" value="3">
  <label for="purple">Depends on the friend</label>

</form>

<form>
  Do you like Wookies?


  <br>
  <input type="radio" name="lightsaber" id="red" value="1">
  <label for="red">Only as a tool to crush my enemies</label>
  <br>
  <input type="radio" name="lightsaber" id="blue" value="2">
  <label for="blue">Yes I consider the creatures as friends</label>
  <br>
  <input type="radio" name="lightsaber" id="purple" value="3">
  <label for="purple">I've met a few good Wookies in my time, a few hostile ones too</label>

</form>

<form>
  Would you ever construct a Droid Army to usurp the Empire's power?


  <br>
  <input type="radio" name="lightsaber" id="red" value="1">
  <label for="red">No, the Empire must be upheld, always</label>
  <br>
  <input type="radio" name="lightsaber" id="blue" value="2">
  <label for="blue">No, using an Army of Droids would make us just as bad</label>
  <br>
  <input type="radio" name="lightsaber" id="purple" value="3">
  <label for="purple">Yes, absolutely</label>

</form>

<form>
  Jar Jar Binks yay or nay?


  <br>
  <input type="radio" name="lightsaber" id="red" value="1">
  <label for="red">Yay</label>
  <br>
  <input type="radio" name="lightsaber" id="blue" value="2">
  <label for="blue">My father liked Jar Jar</label>
  <br>
  <input type="radio" name="lightsaber" id="purple" value="3">
  <label for="purple">Nay, a thousand times, Nay</label>

</form>

<form>
  Have you seen the Mr. Plinkett Star Wars Reviews?


  <br>
  <input type="radio" name="lightsaber" id="red" value="1">
  <label for="red">No</label>
  <br>
  <input type="radio" name="lightsaber" id="blue" value="2">
  <label for="blue">I've heard of them</label>
  <br>
  <input type="radio" name="lightsaber" id="purple" value="3">
  <label for="purple">Yes, he is right on all points raised</label>

</form>

<form>
  Would you build a DeathStar or something like it to assert dominance over the Galaxy?


  <br>
  <input type="radio" name="lightsaber" id="red" value="1">
  <label for="red">Yes, maybe even 2 times</label>
  <br>
  <input type="radio" name="lightsaber" id="blue" value="2">
  <label for="blue">No, the DeathStar is a war machine that must be destroyed</label>
  <br>
  <input type="radio" name="lightsaber" id="purple" value="3">
  <label for="purple">I would possible use such a machine or vessel for my goals</label>

</form>

<form>
  Did you like/know of KOTOR 1 or 2


  <br>
  <input type="radio" name="lightsaber" id="red" value="1">
  <label for="red">No</label>
  <br>
  <input type="radio" name="lightsaber" id="blue" value="2">
  <label for="blue">Yes</label>
  <br>
  <input type="radio" name="lightsaber" id="purple" value="3">
  <label for="purple">I liked KOTO2 but KOTOR 1 had a lame ending.</label>



  <br>
  <br>
  <input type="button" id="qButton" value="Choose">
</form>
<p id="QuestionParagraph"></p>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Phlash6
  • 129
  • 1
  • 2
  • 11
  • Do not post code as screenshots. Copy/paste the code and use the `{}` button in the editor to ensure it is indented 4 spaces. – Jim Garrison Feb 14 '16 at 07:15
  • As @JimGarrison said, use `codeblocks` (or a [JSFiddle](https://jsfiddle.net/)). By the looks of that screenshot, you may be adding `Strings` not `Numbers`. Try using `Number(inputs[i].value);`. – Luke Feb 14 '16 at 07:18
  • And the HTML please... – Arman Ozak Feb 14 '16 at 07:21
  • @Mirabilis using sum+=Number(inputs[i].value); stors NaN in sum. – Phlash6 Feb 14 '16 at 07:23
  • Someone closed the question (a little too early), so we cannot answer it anymore, but here is a list of problems about your code: **1) String Values Do Not Sum Up** People already gave a response about that. Convert them before use. **2) No Initial Value of `sum`** This is why you get `undefined`. Use `var sum=0;` when declaring it. **3) Identical IDs** Your labels won't work when you have identical `id`s. Always use different ones. **4) Identical Names & Multiple Forms** Use only one `
    ` and diferent `name`s for every question, otherwise you will have difficulty when submitting the form.
     – Arman Ozak Feb 14 '16 at 08:05
  • @ArmanOzak Re-opened – mplungjan Feb 15 '16 at 05:33
  • You need to initialise sum and convert each value to a number - each value of course needs to be a digit too: `var sum=0; var inputs = document.getElementsByName('lightsaber'); for (i = 0; i < inputs.length; i++) { if (inputs[i].checked) { sum += parseInt(inputs[i].value,10); console.log(sum); } }` - I still do not see why this is not a duplicate – mplungjan Feb 15 '16 at 06:03
  • @mplungjan That was kind of you, thanks. I hope I did not sound rude or critical. That was not my intention. Sorry, if I did. – Arman Ozak Feb 15 '16 at 09:50

2 Answers2

0

Use parseInt() function to parse the value from input. You are only concatenating the value. Pass value to parseInt and then add to sum. Like sum += parseInt(inputs[i].value);

Idos
  • 15,053
  • 14
  • 60
  • 75
Waqas Ahmed
  • 1,321
  • 1
  • 14
  • 23
0

There are multiple problems about your code:

1) String Values Do Not Sum Up

Waqas already gave a response about that, but here is a quick recap: Even though the <input> values in your HTML include numeric characters only, the data type you are collecting from them is string. In JavaScript + and += operators do not add up two values if any of them is not a number and concatenates them if at least one of them is a string.

Therefore, you need to convert all strings to numbers before use. parseInt() will do the job, yes, but I recommend multiplying the string with 1 (using * 1) instead, since it is shorter, quite readable, decreases file size, and only a little bit slower.

2) No Initial Value of sum

This is why you are getting an undefined value. If you declare sum as follows, it will have an initial value (which is 0) and the += operator will start adding to 0, not to undefined.

var sum=0;

If you do not fix this first, parseInt() or * 1 won't be able to help and you will get a NaN as result of += operation.

3) Identical IDs

If you have identical ids on your HTML tags, your page will look fine, may even work fine, but once you get deeper in the development process, there will be several handicaps, especially in terms of using selectors in CSS and JavaScript, <label> tags, and on-page anchors (href="#something"). In this case, for example, the <label>s do not mark the correct radio button, but it should.

So, always use unique ids in your DOM.

4) Identical Names & Multiple Forms

Your HTML has multiple <form>s and identical name attributes and that is bad. Think about the general scenario where you post the answers to your questionnaire by the click on a button to some server-side script which stores the results to a database or sends an e-mail message with the results.

If you try doing that with a <button type="submit"> or <input type="submit"> placed in one of your s, you will see that you are not able post all of the answers, but only the one in that <form>.

Can you send multiple <form>s via JavaScript? Well, you can, but with a lot of additional effort for nothing. Sometimes that proves neccessary, but not in your case. You'd better use only one <form> and unique name attributes for every question. This way, you will make sure all of the answers get submitted and the values have unique keys.

Arman Ozak
  • 2,304
  • 11
  • 11