If..else.. with selection box value javascript and html

Question

I have a selection box with three different options (4 really with the blank one) and after I click a button I need an alert box to display a message. Here's some code.

HTML:

<select id="item1" name="Item 1">
      <option></option>
      <option value="1">Camera</option>
      <option value="2">Microphone</option>
      <option value="3">Tripod</option>
    </select>

    <button onclick="message()">Go!</button>

Javascript:

    <SCRIPT language = javascript>

function message() {

var s = document.getElementById('item1');
var item1 = s.options[s.selectedIndex].value;

if (item1 = 1) {
    alert("it equals camera")
}
else if (item1 = 2) {
    alert("it equals microphone")
}
else if (item1 = 3) {
    alert("it equals tripod")
}
}

</SCRIPT>

Every time I click the button the alert box says "it equals camera". I could select Microphone and click the button and it would still say that.

If I put

alert(item1)

in the function it displays 1, 2, or 3. So I'm assuming it's something with the if..else.. statements.

ThiefMaster · Accepted Answer · 2012-12-30 21:02:32Z

4

Remember using == instead of =

if(item == 1)

instead of

if(item = 1)

edited Dec 30, 2012 at 21:02

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

answered Dec 30, 2012 at 21:02

No_Name

651 silver badge7 bronze badges

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

Comments

Lightness Races in Orbit · Accepted Answer · 2012-12-30 21:03:19Z

4

In JavaScript we should use ===, this checks data type also.

edited Dec 30, 2012 at 21:03

Lightness Races in Orbit

387k77 gold badges670 silver badges1.1k bronze badges

answered Dec 30, 2012 at 21:02

Raghvendra Parashar

4,0632 gold badges26 silver badges39 bronze badges

Comments

ThiefMaster · Accepted Answer · 2012-12-30 21:02:16Z

In JavaScript (any pretty much every other curly-braces-language) the single = always means assignments. So you assign the value 1 to item1.

You want the comparison operator which is ==.

function message() {
    var s = document.getElementById('item1');
    var item1 = s.options[s.selectedIndex].value;

    if(item1 == '1') {
        alert("it equals camera")
    } else if(item1 == '2') {
        alert("it equals microphone")
    } else if(item1 == '3') {
        alert("it equals tripod")
    }
}

Here are some other suggestions to improve your code:

Do not use the deprecated language attribute of <script>. Just <script> is fine for JavaScript or <script type="text/javascript> if you want to be explicit.
Do not use inline events. Instead of the onclick="..." register an event handler using the addEventListener() method.

Denys Séguret · Accepted Answer · 2012-12-30 21:04:53Z

1

Replace

if (item1 = 1) {

with

if (item1 == 1) {

(and the same for the other ones)

item = 1 changes the value of item1 and returns 1, which evaluates as true in a test.

But note that you could more efficiently

use a switch
or read the value directly

For example :

document.getElementById('item1').onchange = function(){
    alert("it equals " + this.options[this.selectedIndex].innerHTML);        
}

Demonstration

edited Dec 30, 2012 at 21:04

answered Dec 30, 2012 at 20:59

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

2 Comments

Ashley Strout Over a year ago

double equals on all three ifs

Ryan Fitzgerald Over a year ago

Good gosh! This is more like a chat room! Thanks for the quick answer.

P1nGu1n · Accepted Answer · 2012-12-30 22:18:26Z

0

Why not using this method, it's easier when your selector gets more items?

var s = document.getElementById("item1");
var item1 = s.options[s.selectedIndex].text;
window.alert('it equals '+item1);

Edit: JSFiddle

Edit 2: Changing = to == solves your problem. And instead of using s.options[s.selectedIndex].value you can simply use s.selectedIndex. This will also return 1, 2 or 3 and this is easier to understand.

edited Dec 30, 2012 at 22:18

answered Dec 30, 2012 at 21:47

P1nGu1n

5948 silver badges23 bronze badges

Collectives™ on Stack Overflow

If..else.. with selection box value javascript and html

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related