javascript style.display 不適用於按鈕

Question

如您所見，我嘗試制作兩個輸入按鈕（一個顯示，另一個隱藏），單擊時顯示另一個按鈕並隱藏自己。 btn在單擊時顯示 canvas 和btn2但btn2的onclick方法不運行。

 var btn = document.getElementById("btn"); var btn2 = document.getElementById("btn2"); btn2.style.display = "none"; btn.onclick = function () { btn.style.display = "none"; btn2.style.display = "block"; document.body.innerHTML += '<canvas id="someId"></canvas>'; }; btn2.onclick = function() { btn2.style.display = "none"; btn1.style.display = "block"; document.getElementById("someId").remove(); };

 canvas { border: 1px dotted black; }

 <input id='btn' type="submit" value='REMOVE THAT!!!'></input> <input id="btn2" type="submit" value="return to menu" display="none"></input>

Answer 1

問題在於這一行：

document.body.innerHTML += '<canvas id="someId"></canvas>';

您附加到主體的 HTML，這是一種不好的做法，因為它必須重新呈現所有元素，因此，您丟失了 btn2 的點擊處理程序。

解決方案是將 append 和 canvas 作為一個元素，如下所示：

var canvas = document.createElement('canvas');
canvas.id = 'someId';
document.body.appendChild(canvas);

現在，瀏覽器將 append 變成 canvas 而不會破壞和重新創建任何其他元素。

另外，您使用了不存在的btn1 ，更改為btn 。

 var btn = document.getElementById("btn"); var btn2 = document.getElementById("btn2"); btn2.style.display = "none"; btn.onclick = function () { btn.style.display = "none"; btn2.style.display = "block"; var canvas = document.createElement('canvas'); canvas.id = 'someId'; document.body.appendChild(canvas); }; btn2.onclick = function() { btn2.style.display = "none"; btn.style.display = "block"; document.getElementById("someId").remove(); };

 canvas { border: 1px dotted black; }

 <input id='btn' type="submit" value='REMOVE THAT!!!'></input> <input id="btn2" type="submit" value="return to menu" display="none"></input>