兩個類似的javascript函數，其中一個有效，另一個不行，爲什麼？

我是一名Javascript初學者，我正試圖獲得一些簡單的代碼工作。我添加了一個片段作爲檢查，以確保Javascript在頁面中正常工作。它只是將文本從藍色變爲紅色。兩個類似的javascript函數，其中一個有效，另一個不行，爲什麼？

第二段代碼應該隱藏<div>，或根據所選值顯示它。這是行不通的，有人可以指引我走向正確的方向嗎？感謝您的任何建議。

<!DOCTYPE html> 
<html> 
<head> 
    <title>getElementById example</title> 
    <script> 
    function changeColor(newColor) { 
    var elem = document.getElementById("para1"); 
    elem.style.color = newColor; 
    } 
    </script> 

    <script> 
     // EXPAND 
    function Hide(elementid){ 
     document.getElementById(elementid).style.display = 'none'; 
    } 

    function Show(elementid){ 
     document.getElementById(elementid).style.display = ''; 
    } 
    </script> 

</head> 
    <body> 
     <p id="para1">Some text here</p> 
     <button onclick="changeColor('blue');">blue</button> 
     <button onclick="changeColor('red');">red</button> 

     <div id="one">ONE</div> 
     <div id="two">TWO</div> 

     <select> 
      <Option value="javascript:Show('one');javascript:Hide('two')">one</option> 
      <Option value="javascript:Hide('one');javascript:Show('two')">two</option> 
     </select> 
    </body> 
</html>

來源

2013-03-18 TripleAntigen

爲什麼您使用的是「值」屬性管理事件？ – Sebas 2013-03-18 14:23:28

「正確的方向」就是使用[jQuery]（http://jquery.com/）來處理這類事情。 – adamb 2013-03-18 14:23:58

你不能把javascript放到'option'的'value'中。你需要'select'的'onchange'事件。您可能會考慮閱讀HTML表單以及它們如何工作，然後閱讀JavaScript事件。 – 2013-03-18 14:24:10

的value屬性不運行JavaScript。

您需要將change事件綁定到select元素，然後查看選定的值以確定要顯示或隱藏哪一個。

For example：

<div id="one">ONE</div> 
<div id="two">TWO</div> 
<div id="three">THREE</div> 

<select> 
    <option>one 
    <option>two 
    <option>three 
</select> 

<script> 
    function show(id) { 
    document.getElementById(id).style.display = ''; 
    } 
    function hide(id) { 
    document.getElementById(id).style.display = 'none'; 
    } 
    function whichDiv(event) { 
    var select = event.target; 
    var options = select.options; 
    for (var i = 0; i < options.length; i++) { 
     var option = options[i]; 
     if (option.selected) { 
     show(option.value); 
     } else { 
     hide(option.value); 
     } 
    } 
    } 

    document.querySelector('select').addEventListener('change', whichDiv); 
</script>

來源

2013-03-18 14:23:27 Quentin

不能相信你有多快把它放在一起。非常感謝！很棒。 – TripleAntigen 2013-03-18 14:37:16

我認爲你應該使用block：document.getElementById(elementid).style.display = 'block';

來源

2013-03-18 14:22:36 steo

否。將顯示值設置爲''''將刪除指定的內聯值，並允許應用前一個級聯值。由於沒有作者樣式表，該值將來自瀏覽器樣式表，默認爲div元素的'block'。 – Quentin 2013-03-18 14:24:35

兩個類似的javascript函數，其中一個有效，另一個不行，爲什麼？

回答

相關問題