用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"; 

    } 
}