简单javascript只能在断点处工作

我试图理解javascript和DOM操作的一些基本原理，但我遇到了主要的障碍。我正在尝试一个简单的风格变化来隐藏和显示。它将工作，但只有当我放入断点并一步一步地运行代码时。如果chrome开发者工具中没有断点，它将无法工作。我在jQuery中编写了一个等价的函数，遇到了完全相同的问题。下面是javascript：

（函数顶部（）{
var x=document.getElementById（'pizza'）。值；
var y=document.getElementById（'pizza'）；
y、 addEventListener（'change'，changeToppings）；
函数changeToppings（）{
如果（x==‘西西里岛’）{
document.getElementById（'RegToppings'）.style.display='none'；
document.getElementById（'SicToppings'）.style.display='block'；
}else如果（x=='Regular'）{
document.getElementById（'SicToppings'）.style.display='none'；
document.getElementById（'RegToppings'）.style.display='block'；
}
}
})();
#浇头{
显示：无；
}
#浇头{
显示：块；
}

有规律的
西西里人


伙计
蘑菇
意大利 辣味 香肠
橄榄
意大利面食
在我看来，纯Javascript版本的问题在于，您将
pizza
的值存储在
x
页面的开头，而不是当它们更改选择时。这意味着它将永远不会更改并保持为
常规

只要将这一行移到
changeToppings（）
的开头，就可以解决这个问题：


（函数顶部（）{
var y=document.getElementById（'pizza'）；
y、 addEventListener（'change'，changeToppings）；
函数changeToppings（）{
var x=document.getElementById（'pizza'）。值；
如果（x==‘西西里岛’）{
document.getElementById（'RegToppings'）.style.display='none'；
document.getElementById（'SicToppings'）.style.display='block'；
}else如果（x=='Regular'）{
document.getElementById（'SicToppings'）.style.display='none'；
document.getElementById（'RegToppings'）.style.display='block'；
}
}
})();
#浇头{
显示：无；
}
#浇头{
显示：块；
}

有规律的
西西里人


伙计
蘑菇
意大利 辣味 香肠
橄榄
意大利面食
关于纯javascript，请参见@Rhumborl的答案

对于jQuery，
$（“#pizza”）.value返回未定义。获取值的正确方法是
$（“#pizza”）.val（）
但是您需要在HTML
中指定值，否则它将返回标记内的文本（我想在这种情况下也可以这样做）

但是，我无法理解您是如何让它与调试点一起工作的。
我还没有阅读您的代码，但如果事情进展得太快，它可能会发生。试着放慢速度？把这些都放到JSFIDLE里给我们。。。我们可以查看控制台，看看发生了什么。在非jQuery代码中，
x
的值不会随更改而更新。在jQuery中，您需要使用
x=$（“#pizza”）.val（）
。您需要让显示的渲染线程跟上：删除css样式，这样应该可以正常工作。