两个类似的javascript函数，一个有效，另一个无效，为什么？_Javascript_Html_Css

两个类似的javascript函数，一个有效，另一个无效，为什么？

javascript html css

两个类似的javascript函数，一个有效，另一个无效，为什么？,javascript,html,css,Javascript,Html,Css,我是一名Javascript初学者，我正在尝试使用一些简单的代码。我添加了一个代码片段作为检查，以确保Javascript在页面中正常工作。它只是将一些文本从蓝色变为红色第二段代码应该隐藏，或者根据所选值显示它。它不起作用，有人能给我指出正确的方向吗？谢谢你的建议 <!DOCTYPE html> <html> <head> <title>getElementById example</title> <script>

我是一名Javascript初学者，我正在尝试使用一些简单的代码。我添加了一个代码片段作为检查，以确保Javascript在页面中正常工作。它只是将一些文本从蓝色变为红色

第二段代码应该隐藏

，或者根据所选值显示它。它不起作用，有人能给我指出正确的方向吗？谢谢你的建议

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


getElementById示例
函数changeColor（newColor）{
var elem=document.getElementById（“para1”）；
elem.style.color=newColor；
}
//扩展
函数隐藏（elementid）{
document.getElementById（elementid）.style.display='none'；
}
功能显示（elementid）{
document.getElementById（elementid）.style.display=''；
}
这里有一些文字
蓝色
红色
一个
两个
1
二

我认为您应该使用

block

：

document.getElementById（elementid.style.display='block'

我认为您应该使用

block

：

document.getElementById（elementid）.style.display='block'

值

属性不运行JavaScript
您需要将change
事件绑定到select元素，然后查看所选值以确定要显示或隐藏的值
:
1
两个
三
一
二
三
功能显示（id）{
document.getElementById（id）.style.display=''；
}
函数隐藏（id）{
document.getElementById（id）.style.display='none'；
}
函数whichDiv（事件）{
var select=event.target；
var options=select.options；
对于（变量i=0；i
值属性不运行JavaScript
您需要将change
事件绑定到select元素，然后查看所选值以确定要显示或隐藏的值
:
1
两个
三
一
二
三
功能显示（id）{
document.getElementById（id）.style.display=''；
}
函数隐藏（id）{
document.getElementById（id）.style.display='none'；
}
函数whichDiv（事件）{
var select=event.target；
var options=select.options；
对于（变量i=0；i
为什么要使用“value”属性来管理事件？一个“方向正确的点”将用于这类事情。您不能将javascript放入选项的值中。您需要select
的onchange
事件。你可能会考虑阅读HTML表单以及它们是如何工作的，然后阅读JavaScript事件。这不是你的问题的答案，但是你应该看看这个代码。隐藏/显示div是一种更好的方法。请停止推荐使用框架将一个事件添加到一个组合框中。为什么要使用“value”属性来管理事件？这类事情可以使用“指向正确方向的点”。不能将javascript放入选项的值。您需要select
的onchange
事件。你可能会考虑阅读HTML表单以及它们是如何工作的，然后阅读JavaScript事件。这不是你的问题的答案，但是你应该看看这个代码。这是隐藏/显示div的更好方法。请停止推荐使用框架将一个事件添加到一个组合框中。否。将显示值设置为”
将删除其中分配的任何内联值，并允许应用以前的级联值。由于没有作者样式表，该值将来自浏览器样式表，对于div元素，默认为block
。否。将显示值设置为”
将删除其中分配的任何内联值，并允许应用以前的级联值。由于没有作者样式表，该值将来自浏览器样式表，默认为div元素的block。真不敢相信你这么快就把它组合起来了。非常感谢！效果很好。真不敢相信你这么快就完成了。非常感谢！效果很好。
<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>