Home/ Questions/Q 5962371
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T19:05:46+00:00

I am writing a simple little piece of code to draw pixels wherever the

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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