兩個類似的javascript函數，一個起作用，另一個不起作用，為什么？

Question

我是Java語言的初學者，我正在嘗試使一些簡單的代碼起作用。 我添加了一個代碼段作為檢查，以確保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>

Answer 1

value屬性無法運行JavaScript。

您需要將change事件綁定到select元素，然后查看所選值以確定要顯示還是隱藏哪個值。

例如：

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

Answer 2

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

兩個類似的javascript函數，一個起作用，另一個不起作用，為什么？

問題描述

2 個解決方案

解決方案1
6 已采納 2013-03-18 14:23:27

解決方案2
0 2013-03-18 14:22:36

兩個類似的javascript函數，一個起作用，另一個不起作用，為什么？

問題描述

2 個解決方案

解決方案1 6 已采納 2013-03-18 14:23:27

解決方案2 0 2013-03-18 14:22:36

解決方案1
6 已采納 2013-03-18 14:23:27

解決方案2
0 2013-03-18 14:22:36