Справка по удалению JavaScript - PullRequest
Новая
       7

Справка по удалению JavaScript

3 голосов
/ 28 мая 2011

Я пишу простой маленький кусочек кода, чтобы рисовать пиксели там, где мышь находится в рамке.Я также хочу иметь четкую кнопку.Рисование работает нормально, но я не могу заставить работать кнопку очистки.Вот соответствующие части моего .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, поэтому я не знаю.

Ответы [ 4 ]

2 голосов
/ 28 мая 2011

Переименуйте вашу функцию во что-то другое (не ясно ()). 

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

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

  }//end function
1 голос
/ 28 мая 2011

Я не думаю, что clear является допустимым именем для функции.

http://jsfiddle.net/zUJ2e/

РЕДАКТИРОВАТЬ: Да, определенно нет

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

0 голосов
/ 28 мая 2011

То, как вы подключаете свою кнопку к обработчику событий, непреднамеренно нажимает на 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, вы можете установить атрибут onclick в JavaScript, когда дерево DOM в основном готово. 

<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 голосов
/ 28 мая 2011

Вы не должны использовать цикл for ... in для NodeList: 

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

NodeList не является массивом, хотя иногда он работает как один.В общем, «for ... in» предназначен для объектов , а не для массивов.

Еще одно, совершенно отдельное замечание: в некоторых браузерах могут возникнуть проблемы с настройкой «стиля» таким образом.(для ваших "пикселей").Свойство «style» узла DOM во всех браузерах считается странной магией, но я помню, что выполнение того, что вы делаете, может не всегда работать.Вместо этого вы должны установить отдельные свойства someElement.style.

...