如您所见,我尝试制作两个输入按钮(一个显示,另一个隐藏),单击时显示另一个按钮并隐藏自己。 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>
最佳答案
问题出在这一行:
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>
关于javascript style.display 不适用于按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44248832/