JavaScript removeChild help
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.inne开发者_运维技巧rHTML = "";
/* 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.
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
I don't think clear is a valid name for a function.
http://jsfiddle.net/zUJ2e/
EDIT: Yep, definitely not
http://www.roseindia.net/javascript/javascript-clear-method.shtml
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.
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>
加载中,请稍侯......
精彩评论