3

私は、マウスがボックス内のどこにあってもピクセルを描画するための簡単な小さなコードを書いています。クリアボタンも欲しいです。描画は正常に機能しますが、クリアボタンが機能しないようです。これが私の.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

4 に答える 4

2

関数の名前を別の名前に変更します（clear（）ではありません）。

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

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

  }//end function
于 2011-05-27T21:28:51.160 に答える
1

clear関数の有効な名前ではないと思います。

http://jsfiddle.net/zUJ2e/

編集：うん、絶対にない

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

于 2011-05-27T21:27:57.620 に答える
0

NodeListで「for...in」ループを使用しないでください。

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

NodeListは配列ではありませんが、配列のように機能する場合があります。一般に、「for ... in」はオブジェクト用であり、配列用ではありません。

別のまったく別の注意：一部のブラウザでは、「スタイル」をそのように設定すると（「ピクセル」に対して）問題が発生する可能性があります。DOMノードの「style」プロパティは、すべてのブラウザーで奇妙な魔法のように扱われますが、私の記憶では、実行していることを実行しても、常に機能するとは限りません。代わりに、の個々のプロパティを設定しますsomeElement.style。

于 2011-05-27T21:16:25.683 に答える
0

ボタンをイベントハンドラーに接続する方法は、定義したclear（）関数ではなく、誤ってdocument.clear（）を押すことです。

これを回避する1つの方法は、関数の名前を別の名前に変更することです。たとえば、関数の名前を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>
于 2011-05-27T21:45:06.177 に答える