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.

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.

• javascript
• html

5 Answers 5

Remember using == instead of =

if(item == 1)

instead of

if(item = 1)

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

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.

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

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.