JavaScript removeChild帮助_Javascript_Html_Removechild

JavaScript removeChild帮助

javascript html

JavaScript removeChild帮助,javascript,html,removechild,Javascript,Html,Removechild,我正在写一段简单的代码，在鼠标放在盒子里的任何地方画像素。我还想有一个清晰的按钮。画画很好，但我似乎无法让“清除”按钮正常工作。以下是my.js文件的相关部分： function pixel(x, y) { var pix = document.createElement("div"); pix.setAttribute("style", "position:absolute;left:" + x + "px;top:" + y + "px;width:3px;h

我正在写一段简单的代码，在鼠标放在盒子里的任何地方画像素。我还想有一个清晰的按钮。画画很好，但我似乎无法让“清除”按钮正常工作。以下是my.js文件的相关部分：

function pixel(x, y) {
    var pix = document.createElement("div");
    pix.setAttribute("style", "position:absolute;left:" + x + "px;top:" +
        y + "px;width:3px;height:3px;background:#000;cursor:crosshair");
    return pix;
}

var mouseDown = false;

function draw(event) {
    if (!mouseDown) return;
    var x = event.clientX;
    var y = event.clientY;
    document.getElementById("box").appendChild(pixel(x, y));
}

/* Neither 1, 2, nor 3 work! */
function clear() {
    var box = document.getElementById("box");
    /* 1 */
    // box.innerHTML = "";
    /* 2 */
    // box.childNodes = new NodeList();
    /* 3 */
    for (n in box.childNodes)
        box.removeChild(n);
}

我的HTML文件的相关部分是：

<body onmousedown="mouseDown=true" onmouseup="mouseDown=false">
<div id="box" onmouseover="document.getElementById('box').style.cursor='crosshair'"
    onmousemove="draw(event)"></div>
<button onclick="clear()">Clear</button>
</body>


清楚的

该框的格式也有点CSS，但这不应该是一个问题。我觉得问题可能是我正在从框中删除像素，而不是从文档或其他内容中删除像素，但我是一个JavaScript noob，所以我不知道。

你不应该在节点列表上使用“for…in”循环：

for (var n = 0; n < childNodes.length; ++n)
  box.removeChild(childNodes[n]);

for（var n=0；n


节点列表不是数组，尽管有时它的行为有点像数组。通常，“for…In”用于对象，而不是数组
另一个完全不同的注意事项是：在某些浏览器上，这样设置“样式”（对于“像素”）可能会遇到问题。DOM节点的“样式”属性在所有浏览器中都被视为一种奇怪的魔法，但我的记忆是，做你正在做的事情可能并不总是有效。相反，您应该设置someElement.style
的各个属性，我认为clear
不是函数的有效名称

编辑：是的，绝对不是
将您的函数重命名为其他函数（not clear（））
将按钮连接到事件处理程序的方式是无意中命中document.clear（），而不是定义的clear（）函数
避免这种情况的一种方法是将函数重命名为其他函数。例如，如果将函数重命名为myClear（），则应该可以解决此特定冲突。然而，这确实让人觉得有点不可靠
您可以用JavaScript本身绑定事件处理程序，这似乎更可靠。如果您使用的是JQuery库，则可以执行以下操作，例如：
// when the document is ready...
$(document).ready(function() {
    // connect all buttons to the clear event handler.
    $('button').click(clear); 
})

如果您试图坚持使用普通JavaScript，那么可以在DOM树基本就绪时在JavaScript中设置onclick属性
<body onmousedown="mouseDown=true" onmouseup="mouseDown=false">
<div id="box" onmouseover="document.getElementById('box').style.cursor='crosshair'"
     onmousemove="draw(event)"></div>
<!-- button has an id to make it selectable with getElementById() -->
<button id="button">Clear</button>

<!-- Placed at the bottom so we have a chance of getting button -->
<script>
    document.getElementById("button").onclick = clear;
</script>

</body>


清楚的
document.getElementById（“按钮”）.onclick=clear；
好的，我做了更改，但没有解决问题。嗯。。。你有什么错误吗？您是否尝试过引入一些“console.log（）”调用（或“alert（）”），以确保“childNodes”列表不为空，等等？添加console.log语句似乎显示clear从未被调用。是的，我在这里偷了函数：））您还可以将“onclick”属性更改为“window.clear（）”，而不仅仅是“clear（）”，或者，更好的是，使用比20世纪90年代DOM0属性更现代的东西来附加事件处理程序：-）问题不是“clear”是无效的函数名；当然不是。问题是，当您将事件处理程序连接为DOM 0“onclick”属性时，会出现一些范围问题。如果将“onclick”从“clear（）”更改为“window.clear（）”，那么它就可以正常工作。
<body onmousedown="mouseDown=true" onmouseup="mouseDown=false">
<div id="box" onmouseover="document.getElementById('box').style.cursor='crosshair'"
     onmousemove="draw(event)"></div>
<!-- button has an id to make it selectable with getElementById() -->
<button id="button">Clear</button>

<!-- Placed at the bottom so we have a chance of getting button -->
<script>
    document.getElementById("button").onclick = clear;
</script>

</body>