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 的点击处理程序。

解决方案是像这样将 Canvas 附加为一个元素:

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

现在，浏览器将在不破坏和重新创建任何其他元素的情况下附加 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>