JavaScriptを使用したボタンの表示/非表示

Question

ボタンを隠して別のボタンを作成するこの機能を使用すると、作成したボタンをクリックすると、前に隠された人が見えるようになりますが、実際には機能しません。

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

    } 
} 

Answer 1

あなたはイベントリスナーをアタッチするときは、リスナー関数を呼び出すことはできません。

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 2

PeterMader問題はあなたがイベントリスナーにshowButtons()関数を呼び出していることです言ったように。あなたは、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>