Changing multiple variables with if-statement

Question

I just started learning Javascript. For a beginners project I'm making a quiz-guide to find out which South Park character you are. But I have some problems making it work. Here are some pieces of my code:

In my HTML-document the code looks like this:

<form name="characterform">
                <p>What kind of food do you like to eat?</p>
                <ul>
                    <li><input type="radio" name="1" value="" id="radio11" />Pizza</li>
                    <li><input type="radio" name="1" value="" id="radio12" />Chips and snacks</li>
                    <li><input type="radio" name="1" value="" id="radio13" />Health foods</li>
                    <li><input type="radio" name="1" value="" id="radio14" />Kosher</li>
                    <li><input type="radio" name="1" value="" id="radio15" />Powdered donut pancake surprise</li>
                    <li><input type="radio" name="1" value="" id="radio16" />Anything, as long as it's cheap</li>                   
                </ul>
                <input type="button" name="button" value="Calculate" id="button" onClick="start()" />
            </form>

In my script-document I begin by creating my variables and use if-statements to change them, like this:

function start(){
if(document.characterform.radio11.checked)
    cartman += 5;
    kyle += 5;
    stan += 5;
    kenny += 5;
    butters += 5;

Finally I use if-statements to get a result:

if(cartman > kyle && cartman > stan && cartman > kenny && cartman > butters)
    alert("Cartman! " + "\n" + cartman + "\n" + kyle + "\n" + stan + "\n" + kenny + "\n" + butters);
else if(kyle > cartman && kyle > stan && kyle > kenny && kyle > butters)
    alert("Kyle! " + "\n" + cartman + "\n" + kyle + "\n" + stan + "\n" + kenny + "\n" + butters);
else if(stan > cartman && stan > kyle && stan > kenny && stan > butters)
    alert("Stan! " + "\n" + cartman + "\n" + kyle + "\n" + stan + "\n" + kenny + "\n" + butters);
else if(kenny > cartman && kenny > stan && kenny > kyle && kenny > butters)
    alert("Kenny! " + "\n" + cartman + "\n" + kyle + "\n" + stan + "\n" + kenny + "\n" + butters);
else
    alert("Error");

I've done this with all my radio-buttons. The problem is that no matter which radio button is selected, the result is always the same: kyle. In fact, when looking at the print-out of the numbers it seems that Cartman is the only variable that changes. The other four variales are exactly the same, no matter what, with kyle getting the most points.

All of the script-code is in the start() function, except the creating of the variables.

I've searched alot for an answer, but I haven't found anyone with the same problem - so I'm guessing there's an easy solution to my problem. I hope someone here can help me understand this.

Those are parentheses, and they're for grouping statements. That shouldn't be necessary here. — isherwood
– isherwood, Commented Dec 12, 2014 at 0:10

bob-fornal · Accepted Answer · 2014-12-12 00:16:45Z

1

When using multiple lines in a javascript if block, use ...

if(document.getElementById('radio11').checked) {
    cartman += 5;
    kyle += 5;
    stan += 5;
    kenny += 5;
    butters += 5;
}

Note the braces ... {}

You might also want to make this modification ...

if((cartman > kyle) && (cartman > stan) && (cartman > kenny) && (cartman > butters))
    alert("Cartman! " + "\n" + cartman + "\n" + kyle + "\n" + stan + "\n" + kenny + "\n" + butters);
...

... this will ensure that the comparisons are executed properly

edited Dec 12, 2014 at 0:16

answered Dec 12, 2014 at 0:10

bob-fornal

5,1205 gold badges34 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Magsen85 Over a year ago

Adding the braces did the trick! Thank you so much. I will try to implement all the other answers I got

bob-fornal Over a year ago

Cool ... I think @JakeLin has some good comments ... I was going to add something like that, but felt odd taking another idea. You might want to consider always using the braces, in practice. This will ensure you don't missing anything or do anything unexpected.

Magsen85 Over a year ago

I actually started out using the braces, but when I found that it worked without I started doing that instead. But now I will make a point of using the braces, no matter what, and make it a habit. Again: thanks for the help :)

Verhaeren · Accepted Answer · 2014-12-12 00:12:26Z

0

This is not the right way to access the element:

if(document.characterform.radio11.checked) //this assumes a form element named: radio11

So, in addittion to the brackets, you should check that this way:

if(document.getElementById('radio11').checked){ ... } //this assumes a form element with id: radio 11

answered Dec 12, 2014 at 0:12

Verhaeren

1,6539 silver badges10 bronze badges

3 Comments

Magsen85 Over a year ago

It works now, with my document.characterform.radio11. But you're saying that still isn't right? If so, I will change it. Just trying to figure out why.

Verhaeren Over a year ago

The structure document.form.elementform is to acces the element via name attribute: <input name="myInput" />. The structure document.getElementById('element') is to acces the element via id attribute: <input id="myInput" />. If you're saying that the name-structure is accesing the element, then either your HTML code is different than the one you have here and you actually have this: <input type="radio" name="radio11" value="" id="radio11" /> or javascript has complete changed since the last time I checked (it could be, I'm not a big fan).

Magsen85 Over a year ago

Then javascript must have changed, because the HTML code is the same. But if your way still is best practice I will start using that in stead if it works. Thank you for explaining it to me.

Jake Lin · Accepted Answer · 2014-12-12 00:36:55Z

0

I think your logic should be similar to this. Please bear in mind, if you want to change multiple variables in one block, need to use curly brackets to wrap them together.

if(document.getElementById('radio11').checked) {
    cartman += 5;
}
else if(document.getElementById('radio12').checked) {
    kyle += 5;
}
else if(document.getElementById('radio13').checked) {
    stan += 5;
}
else if(document.getElementById('radio14').checked) {
    kenny += 5;
}
else if(document.getElementById('radio15').checked) {
    butters += 5;
}

edited Dec 12, 2014 at 0:36

answered Dec 12, 2014 at 0:15

Jake Lin

11.5k6 gold badges31 silver badges40 bronze badges

2 Comments

Magsen85 Over a year ago

I see your point. But I wanted to make it so that some answers will add points to some characters and take points from others. Also, I'm trying to make it so that you don't end up getting the same amount of points for two characters at the end.

Jake Lin Over a year ago

Just wrap one execution logic within curly brackets, the should do the trick for you.

Collectives™ on Stack Overflow

Changing multiple variables with if-statement

3 Answers 3

3 Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related