CODEWITHSUNDEEP
javascripthtml
Ryan Fitzgerald
Ryan Fitzgerald

Reputation: 455

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

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.

Upvotes: 3

Views: 33435

Answers (5)

P1nGu1n
P1nGu1n

Reputation: 594

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.

Upvotes: 0

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382150

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

Upvotes: 1

Raghvendra Parashar
Raghvendra Parashar

Reputation: 4053

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

Upvotes: 4

No_Name
No_Name

Reputation: 65

Remember using == instead of =

if(item == 1)

instead of

if(item = 1)

Upvotes: 4

ThiefMaster
ThiefMaster

Reputation: 318518

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.

Upvotes: 1

Related Questions