Question

正如您所看到的，我尝试制作两个输入按钮（一个显示，另一个隐藏），单击时，显示另一个并隐藏自己。 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>

Answer 1

问题在于这一行：

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

您正在附加到正文的HTML，这是不好的做法，因为它必须重新渲染所有元素，因此，您已经丢失了btn2的点击处理程序。

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

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

现在，浏览器将附加画布而不会破坏并重新创建任何其他元素。

此外，您使用了不存在的btn1，更改为btn。

＆＃13;

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();
};

＆＃13;

canvas {
    border: 1px dotted black;
}

＆＃13;

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

＆＃13;

javascript style.display无法使用按钮

1 个答案: