Javascript If-else

Question

Attempting to do my first bit of Javascript if / else. Basically I would like to display DIVs according to the number selected from the Radio box field. If option 3 is selected, I would like div 1, 2 and 3 to be visible. I am clearly going wrong somewhere. Thoughts / help is very much appreciated.

<script type="text/javascript" >

$(document).ready(function() {

$("input[name$='supplier']").click(function() {

var test = $(this).val();

if (test=1)
{
$("div.hidesupplier").hide();
$("#suppliersourced1").show();
}

else if (test=2)
{
$("div.hidesupplier").hide();
$("#suppliersourced1").show();
$("#suppliersourced2").show();
}

else if (test==3)
{
$("#suppliersourced1").show();
$("#suppliersourced2").show();
$("#suppliersourced3").show();
}

});
});
</script>

Number of Suppliers:
<label><input name="supplier" type="radio" value="1">1.</label> 
<label><input name="supplier" type="radio" value="2">2.</label>
<label><input name="supplier" type="radio" value="3">3.</label>

<div id="suppliersourced1" class="CF hidesupplier" style="display: none;">Supplier One</div>
<div id="suppliersourced2" class="CF hidesupplier" style="display: none;">Supplier Two</div>
<div id="suppliersourced3" class="CF hidesupplier" style="display: none;">Supplier Three</div>

If you're going to check the same variable against different values, switch/case would be better than if/then/elseif — Barmar
– Barmar, Commented Feb 1, 2013 at 6:09

techfoobar · Accepted Answer · 2013-02-01 07:14:39Z

5

A cleaner and faster version would be:

$("input[name$='supplier']").click(function() {
    var test = $(this).val();
    $("div.hidesupplier").each(function() {

        // get the id of the current supplier, eg: "suppliersourced1"   
        var myID = $(this).attr('id');

        // get the last character and convert it to a number
        myID = parseInt(myID.substring(myID.length()-1, 1), 10);

        // show all with id less than or eq to test 
        // hide all with id more than test
        if(myID <= test) $(this).show(); else $(this).hide();
    });
});

Cleaner because you have almost no repeating code. Faster because you dont blindly hide everything and show specific elements, but only hide and show appropriate elements in one go. Faster also because there is lesser bytes of JS code to be transferred, parsed and executed.

edited Feb 1, 2013 at 7:14

answered Feb 1, 2013 at 6:00

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

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

1 Comment

Brandrally Over a year ago

Thank you for your response. Definitely kind of makes sense. Just learning JS right now so I am sure it will dawn on me shortly. I cannot however manage to make the solution above work. Sure I will figure it out though. Thanks again.

AnthonyM · Accepted Answer · 2013-02-01 05:57:25Z

4

You have = instead of == in your first 2 conditions.

answered Feb 1, 2013 at 5:57

AnthonyM

1,1452 gold badges11 silver badges20 bronze badges

2 Comments

Brandrally Over a year ago

Argh! So simple and I am so dumb! Thanks heaps. Was staring at it for around 20 minutes trying to figure out what I was doing wrong!

AnthonyM Over a year ago

Everyone does it at least once. My "Argh!" moments are if(condition); do something...

Collectives™ on Stack Overflow

Javascript If-else

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related