Using Javascript, I cannot get IF statements in an onchange function to fire properly

Question

Using Javascript, I am trying to fire a function when a change is made to a select dropdown menu.

The HTML is:

<select id="select" onchange="characterchange()">
  <option value="spidey">Spider-Man
  <option value="panther">Black Panther
</select>

<div id="Spidey">
  <h2 style="color: red">Spider-Man</h2>
    ...
    ...
</div>

<div id="Panther">
  <h2 style="color: black">Panther</h2>
  ...
  ...
</div>

The JS is:

function characterchange() {
  console.log("fired characterchange");

  var character = document.getElementById("select").value;
  console.log(character);

  if (character = "Spider-Man") {
    console.log("selected spidey");
    document.getElementById("Spidey").style.display = "inline";
    document.getElementById("Panther").style.display = "none";
    console.log("showing Spidey");
  }
  if (character = "Black Panther") {
    console.log("selected panther");
    document.getElementById("Spidey").style.display = "none";
    document.getElementById("Panther").style.display = "inline";
    console.log("showing Panther");
  }
}

I'm getting logs for fired characterchange, character, selected spidey, and selected panther when any change is made. The CSS is not being changed and the logs that follow that code aren't firing. What am I missing?

Edit: Making the change to === fires the correct if statement however, my function stops after "selected spidey" or "selected panther".

You meant to use `===` not `=`. The former is for equality, the latter for assignment. — elclanrs, Jan 03 '18 at 05:15
^ or you could use `==`. Do read: https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons#359509 — Nisarg Shah, Jan 03 '18 at 05:16
@elclanrs Doing that fires the correct if statement however, my function stops after `"selected spidey"` or `"selected panther"` — cfoster5, Jan 03 '18 at 05:17

Adelin · Answer 1 · 2018-01-03T05:39:06.637

1

if (character = "Spider-Man")

translates into

if ("Spider-Man") // at this point character variable will have the "Spider-Man" value, as @Teemu correctly pointed out

which, due to JS coercion, always translates into

if (true)

What you meant is

if (character === "Spider-Man") // === (comparison) not = (assignment)

edited Jan 03 '18 at 05:39

answered Jan 03 '18 at 05:16

Adelin

7,809
5
37
65

1

Worth nothing to mention, that as a side effect "Spider-Man" is also assigned to `character`. – Teemu Jan 03 '18 at 05:37

score 1 · Accepted Answer · answered Jan 03 '18 at 05:20

Please check this updated code which is working.

First you should make == symbol inside if condition.

Then change the value within if condition.

function characterchange() {
console.log("fired characterchange");

var character = document.getElementById("select").value;

if (character == "spidey") {
    console.log("selected spidey");
    document.getElementById("Spidey").style.display = "inline";
    document.getElementById("Panther").style.display = "none";
    console.log("showing Spidey");
}

if (character == "panther") {
    console.log("selected panther");
    document.getElementById("Spidey").style.display = "none";
    document.getElementById("Panther").style.display = "inline";
    console.log("showing Panther");
}
}

<select id="select" onchange="characterchange()">
  <option value="spidey">Spider-Man</option>
  <option value="panther">Black Panther</option>
</select>

<div id="Spidey">
  <h2 style="color: red">Spider-Man</h2>
</div>

<div id="Panther">
  <h2 style="color: black">Panther</h2>
</div>

score 0 · Answer 3 · answered Jan 03 '18 at 05:37

Not sure what the aim is but pretty much all is wrong. As others have hinted, = is assignemnt, while == or === check for equality.

next you have:

 var character = document.getElementById("select").value;

here, you are getting value of the select. Then below, you are comparing with the text value of the element. So instead of

   if (character = "Spider-Man") {

do:

 if (character == "spidey") {

Here is a full page:

       <script>
    function characterchange() {
      console.log("fired characterchange");

      var character = document.getElementById("select").value;
      console.log(character);

      if (character == "spidey") {
        console.log("selected spidey");
        document.getElementById("Spidey").style.display = "block";
        document.getElementById("Panther").style.display = "none";
        console.log("showing Spidey");
      }
      if (character == "panther") {
        console.log("selected panther");
        document.getElementById("Spidey").style.display = "none";
        document.getElementById("Panther").style.display = "block";
        console.log("showing Panther");
      }
    }

    </script>

and the HTML:

    <select id="select" onchange="characterchange()">
          <option value="spidey">Spider-Man
          <option value="panther">Black Panther
        </select>

        <div id="Spidey">
          <h2 style="color: red">Spider-Man</h2>
            ...
            ...
        </div>

        <div id="Panther">
          <h2 style="color: black">Panther</h2>
          ...
          ...
        </div>

Using Javascript, I cannot get IF statements in an onchange function to fire properly

3 Answers3