用javascript隱藏/顯示按鈕

Question

我有這個隱藏一些按鈕並創建另一個按鈕的功能，當我點擊創建的按鈕時，它應該再次顯示那些之前隱藏的按鈕，但它並不真正起作用。

function hideButtons() { 
    var buttons = document.querySelectorAll("input[type=button]"); 

    for (var i = 0; i < buttons.length; i++) { 
    buttons[i].style.display = "none"; 
    if (buttons[i].getAttribute("id") === "btnBack") { 
     // remove the id from the current "back" button 
     buttons[i].removeAttribute("id"); 
    } 
    } 

    var back = document.createElement("input"); 
    back.setAttribute("type", "button"); 
    back.setAttribute("value","BACK"); 
    back.setAttribute("id","btnBack"); 
    back.onclick = showButtons; // important! 
    document.body.appendChild(back); 
} 


function showButtons() { 
    var buttons = document.querySelectorAll("input[type=button]"); 
    for (var i = 0; i < buttons.length; i++) { 
    buttons[i].style.display = "initial"; 
    } 
} 

Answer 1

當您將事件偵聽器不得調用監聽功能。你想調用一個像Peter建議的函數引用，或者另一種方法是將showButtons()包裝在一個函數中。

function hideButtons() { 
 
    var buttons = document.getElementsByTagName("input"); 
 

 
    for (var i = 0; i < buttons.length; i++) { 
 
    if (buttons[i].type == "button") { 
 
     buttons[i].style.display = "none"; 
 
    } 
 
    } 
 

 
    var back = document.createElement("input"); 
 
    back.setAttribute("type", "button"); 
 
    back.setAttribute("value", "BACK"); 
 
    back.setAttribute("id", "btnBack"); 
 
    back.onclick = function() { 
 
    showButtons(); 
 
    } 
 
    document.body.appendChild(back); 
 
} 
 

 
function showButtons() { 
 
    var buttons = document.getElementsByTagName("input"); 
 

 
    for (var i = 0; i < buttons.length; i++) { 
 
    buttons[i].style.display = "initial"; 
 
    } 
 
} 
 

 
hideButtons();

<input type="button"> 
 
<input type="button"> 
 
<input type="button"> 
 
<input>

Answer 2

像PeterMader說，問題是，我們在調用的事件偵聽器的showButtons()功能：

function hideButtons(){ 
    var buttons=document.getElementsByTagName("input"); 

    for(var i=0;i<buttons.length;i++) { 
     if(buttons[i].type=="button"){ 
     buttons[i].style.display="none";} 

    } 

    var back=document.createElement("input"); 
    back.setAttribute("type", "button"); 
    back.setAttribute("value","BACK"); 
    back.setAttribute("id","btnBack"); 
    back.onclick=showButtons(); 
    document.body.appendChild(back); 


} 


function showButtons(){ 
    var buttons=document.getElementsByTagName("input"); 


    for(var i=0;i<buttons.length;i++) { 
     buttons[i].style.display="initial"; 

    } 
}