Simple javascript will only work with a breakpoint

Question

I'm trying to understand some of the fundamentals of javascript and DOM manipulation, and I've run into major roadblock. I'm trying a simple change of style to hide and show. It will work, but ONLY when I put in a breakpoint and run the code step by step. With no breakpoints in chrome developer tools it won't work. I wrote an equivalent in jQuery to, and ran into the exact same problem. Here is javascript:

(function topping() {
  var x = document.getElementById('pizza').value;
  var y = document.getElementById('pizza');
  y.addEventListener('change', changeToppings);

  function changeToppings() {
    if (x == 'Sicilian') {
      document.getElementById('RegToppings').style.display = 'none';
      document.getElementById('SicToppings').style.display = 'block';
    } else if (x == 'Regular') {
      document.getElementById('SicToppings').style.display = 'none';
      document.getElementById('RegToppings').style.display = 'block';
    }
  }
})();

#SicToppings {
  display: none;
}
#RegToppings {
  display: block;
}

<content>
  <select id="pizza">
    <option id="Regular">Regular</option>
    <option id="Sicilian">Sicilian</option>


  </select>
  <br />
  <input type="checkbox" id="buddybox" />buddy
  <select size="5" id="SicToppings">
    <option>mushrooms</option>
    <option>pepperoni</option>
  </select>
  <select size="5" id="RegToppings">
    <option>olives</option>
    <option>pasta</option>
  </select>
</content>

and here's the jQuery:

$(document).ready(function() { $("#pizza").change(function () {
    var x = $("#pizza").value;
    if (x == "Sicilian")
    {
        $("#RegToppings").delay(1000).hide();
        $("#SicToppings").delay(1000).show();
    }
    else if (x == "Regular")
    {
        $("#SicToppings").delay(1000).hide();
        $("#RegToppings").delay(1000).show();
    }
    })
})

Thank you so much for any assistance you can offer. I'm not just looking for the solution, I'm trying to figure out why this is even happening, I think it has something to do with timing or call backs and I know that this a major component of javascript I have to understand. Thank you.

I haven't read your code but it can occur if things are going too fast. Try slowing things down? — Indigo, Dec 03 '14 at 22:35
Throw all of that into a jsFiddle for us... we can look at the console and see what's going on. — Phil Tune, Dec 03 '14 at 22:35
in your non-jQuery code, the value of `x` is not being updated on-change. In the jQuery, you need to use `x = $("#pizza").val()`. — levi, Dec 03 '14 at 22:39
You need to let the rendering threads of the display catch up: http://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful — Jonathan M, Dec 03 '14 at 22:39
Here's the fiddle. Thank you for the value x solution, but I don't get why it was working with breakpoints. Chrome said Closure: x = "Sicilian" did this have something to do with it? Also, is there some tool to check for jQuery syntax errors like in Visual Studio? Thank you. — David Arnold, Dec 04 '14 at 04:00

score 1 · Answer 1 · answered Dec 03 '14 at 22:44

From what I can see, the problem with the pure Javascript version is that you are storing the value of pizza in x at the start of the page instead of when they change selection. This means it will never change and stay as Regular.

Just moving this line to the start of changeToppings() seems to fix it:

(function topping() {
  var y = document.getElementById('pizza');
  y.addEventListener('change', changeToppings);

  function changeToppings() {
    var x = document.getElementById('pizza').value;
    if (x == 'Sicilian') {
      document.getElementById('RegToppings').style.display = 'none';
      document.getElementById('SicToppings').style.display = 'block';
    } else if (x == 'Regular') {
      document.getElementById('SicToppings').style.display = 'none';
      document.getElementById('RegToppings').style.display = 'block';
    }
  }
})();

#SicToppings {
  display: none;
}
#RegToppings {
  display: block;
}

<content>
  <select id="pizza">
    <option id="Regular">Regular</option>
    <option id="Sicilian">Sicilian</option>


  </select>
  <br />
  <input type="checkbox" id="buddybox" />buddy
  <select size="5" id="SicToppings">
    <option>mushrooms</option>
    <option>pepperoni</option>
  </select>
  <select size="5" id="RegToppings">
    <option>olives</option>
    <option>pasta</option>
  </select>
</content>

Kraiden · Answer 2 · 2014-12-04T01:49:36.730

0

See @Rhumborl's answer for the pure javascript.

For jQuery, $("#pizza").value; is returning undefined. The proper way to get the value is $("#pizza").val(); but you'll need to specify the value in your HTML <option id="Regular" value="Regular"> Otherwise it'll return the text inside the tag (which in this case would work too I suppose)

How you got it to work with a debug point is beyond me though.

edited Dec 04 '14 at 01:49

answered Dec 04 '14 at 01:35

Kraiden

567
3
18

Simple javascript will only work with a breakpoint

2 Answers2