javascript - 为什么同名的三个函数只能工作一次？

Question

有人知道这是为什么吗？

我试图通过单击相应的按钮来隐藏这三个区域中的任何一个。

这是我的代码:

<div id="prod">Prod

  <button type="button" onclick="myFunction()" class="prodButton">Hide</button>

  <script>
    function myFunction() {
      document.getElementById("prod").style.visibility = "hidden";
    }
  </script>
</div>
<div id="test">Test

  <button type="button" onclick="myFunction()" class="testButton">Hide</button>

  <script>
    function myFunction() {
      document.getElementById("test").style.visibility = "hidden";
    }
  </script>
</div>
<div id="dev">Dev

  <button type="button" onclick="myFunction()" class="devButton">Hide</button>

  <script>
    function myFunction() {
      document.getElementById("test").style.visibility = "hidden";
    }
  </script>
</div>

Answer 1

每次你这样做:

function myFunction() {

您显然是在重新定义函数(取消旧函数并创建新函数，以便最后一个函数胜出)。您需要以接受参数并基于它应该做某事的方式来制作它。您误用或没有理解函数的概念。

最终你的函数应该是这样的:

function myFunction(element) {
  document.getElementById(element).style.visibility = "hidden";
}

只定义一次，应该多次调用，如下所示:

myFunction("prod");
myFunction("test");
myFunction("dev");

完整代码

<script>
  function myFunction(element) {
    document.getElementById(element).style.visibility = "hidden";
  }
</script>
<div id="prod">Prod
  <button type="button" onclick="myFunction(\"prod\")" class="prodButton">Hide</button>
</div>
<div id="test">Test
  <button type="button" onclick="myFunction(\"test\")" class="testButton">Hide</button>
</div>
<div id="dev">Dev
  <button type="button" onclick="myFunction(\"dev\")" class="devButton">Hide</button>
</div>