JavaScript 删除子项帮助

发布于 2024-11-10 11:15:24 字数 1220 浏览 2 评论 0原文

我正在编写一段简单的代码，用于在鼠标位于框中的任何位置绘制像素。我也想要一个清晰的按钮。绘图工作正常，但我似乎无法使用清除按钮。以下是我的 .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 菜鸟，所以我不知道。

原文

I am writing a simple little piece of code to draw pixels wherever the mouse is in a box. I also want to have a clear button. Drawing works fine, but I can't seem to get the clear button to work. Here are the relevant parts of my .js file:

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

The relevant part of my HTML file is:

<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>

The box is also formatted a bit with CSS but that shouldn't be an issue. I feel like the problem might be that I'm deleting the pixels from the box but not from the document or something, but I'm a JavaScript noob so I don't know.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

遥远的她 2024-11-17 11:15:24

将您的函数重命名为其他名称（不明确（））。

function removePixels() {
var box = document.getElementById("box");

if (box.hasChildNodes() )
{
while ( box.childNodes.length >= 1 )
{
    box.removeChild( box.firstChild );       
} 
}

  }//end function

Rename your function to something else (not clear()).

function removePixels() {
var box = document.getElementById("box");

if (box.hasChildNodes() )
{
while ( box.childNodes.length >= 1 )
{
    box.removeChild( box.firstChild );       
} 
}

  }//end function

回复收藏 0 原文

隱形的亼 2024-11-17 11:15:24

我认为 clear 不是函数的有效名称。

http://jsfiddle.net/zUJ2e/

编辑：是的，绝对不是

http://www.roseindia.net/javascript/javascript-clear-method.shtml

回复收藏 0 原文

蓝海 2024-11-17 11:15:24

您不应该在 NodeList 上使用“for ... in”循环：

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

NodeList 不是数组，尽管有时它的行为有点像数组。一般来说，“for ... in”适用于对象，而不是数组。

另一个完全独立的注意事项：您可能会在某些浏览器上以这种方式设置“样式”（针对您的“像素”）时遇到问题。 DOM 节点的“style”属性在所有浏览器中都被视为一种奇怪的魔法，但我的记忆是，做你正在做的事情可能并不总是有效。相反，您可以设置 someElement.style 的各个属性。

You shouldn't use a "for ... in" loop on a NodeList:

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

A NodeList isn't an Array, though it sort-of acts like one, sometimes. In general, "for ... in" is for objects, not Arrays.

Another, totally separate note: you may run into problems on some browsers setting the "style" that way (for your "pixels"). The "style" property of a DOM node is treated as a weird magic thing in all browsers, but my recollection is that doing what you're doing may not always work. Instead, you would set individual properties of someElement.style.

回复收藏 0 原文

岁吢 2024-11-17 11:15:24

您将按钮连接到事件处理程序的方式是无意中点击了 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>

The way that you're hooking up for your button to the event handler is inadvertently hitting document.clear(), rather than the clear() function that you've defined.

One way to avoid this is to rename the function to something else. If you rename the function to myClear(), for example, that should resolve this particular conflict. This does feel a bit dodgy, however.

You can bind your event-handler in JavaScript itself, which seems more reliable. If you're using the JQuery library, you can do something like this, for example:

// when the document is ready...
$(document).ready(function() {
    // connect all buttons to the clear event handler.
    $('button').click(clear); 
})

If you're trying to stick with vanilla JavaScript, you can set the onclick attribute in JavaScript, when the DOM tree is mostly ready.

<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>

回复收藏 0 原文

~没有更多了~