簡單的JavaScript只能用於斷點

我想了解一些JavaScript和DOM操作的基礎知識，並且我遇到了主要障礙。我正在嘗試簡單地改變風格來隱藏和顯示。它會工作，但只有當我放入一個斷點並逐步運行代碼時。在Chrome開發者工具中沒有斷點的情況下，它將無法工作。我在jQuery中寫了一個等價物，並遇到了完全相同的問題。這裏是JavaScript的：簡單的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>

，這裏是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(); 
    } 
    }) 
})

謝謝你這麼多，你可以提供任何幫助。我不只是在尋找解決方案，我試圖弄清楚爲什麼會發生這種情況，我認爲這與時間安排或回調有關，我知道這是我必須瞭解的JavaScript的一個主要組成部分。謝謝。

來源

2014-12-03 David Arnold

我還沒有讀過你的代碼，但是如果事情進行得太快，它可能會發生。嘗試減慢速度？ – Indigo 2014-12-03 22:35:06

把所有這些都投入到我們的jsFiddle中......我們可以看看控制檯，看看發生了什麼。 – philtune 2014-12-03 22:35:56

在你的非jQuery代碼中，'x'的值沒有被更新on-change。在jQuery中，你需要使用'x = $（「＃pizza」）。val（）'。 – levi 2014-12-03 22:39:24

從我所看到的情況來看，純Javascript版本的問題在於，在頁面開始時，您將pizza的值存儲在x中，而不是在更改選擇時。這意味着它永遠不會改變並保持爲Regular。

只需移動這條線的changeToppings()開始似乎解決它：

(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>

來源

2014-12-03 22:44:14 Rhumborl

見@ Rhumborl的回答爲純JavaScript。

對於jQuery，$("#pizza").value;返回undefined。正確的方法來獲取值是$("#pizza").val();但是你需要在你的HTML <option id="Regular" value="Regular">指定值，否則它會返回文本，在標籤內（在這種情況下將工作太我想）

你怎麼了它與調試點工作是超越我，但。

來源

2014-12-04 01:35:32 Kraiden

簡單的JavaScript只能用於斷點

回答

相關問題