javascript - javascript style.display无法使用按钮

如您所见，我尝试创建两个输入按钮（显示一个，另一个隐藏），单击该按钮可显示另一个并隐藏自身。单击时，Btn和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>

最佳答案

问题在于此行：

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

您将附加到正文的HTML，这是一种不好的做法，因为它必须重新呈现所有元素，因此，您失去了btn2的点击处理程序。

解决方案是将画布附加为元素，如下所示：

var canvas = document.createElement('canvas');
canvas.id = 'someId';
document.body.appendChild(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>