爲什麼三個具有相同名稱的函數只能運行一次？

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> 

Answer 2

如果你真的想測試一些代碼qu ickly，那麼你可以寫下面的內聯JavaScript代碼。但是這不應該寫成生產代碼。

<div id="prod">Prod 
    <button type="button" onclick="this.parentNode.style.visibility='hidden'" class="prodButton">Hide</button> 
</div> 
<div id="test">Test 
    <button type="button" onclick="this.parentNode.style.visibility='hidden'" class="testButton">Hide</button> 
</div> 
<div id="dev">Dev 
    <button type="button" onclick="this.parentNode.style.visibility='hidden'" class="devButton">Hide</button> 
</div>