0

このコードで cleanGrid() 関数を呼び出すときの目標は、クラス「円」であった div を取り除き、それをクラス「正方形」の div に置き換えることでした。私が実際にこのコードを使用しているのは、交換可能なアイテムではないため、replaceChild() が機能しないためです。cleanGrid() への関数呼び出しをコメントアウトすると、コードは正常に実行され、ボタンはクリックごとにクラス 'square' を持つ div を追加するだけです。私が実際に望んでいるのは、cleanGrid() が「グリッド」div にあるものをすべて削除し、この関数が呼び出された後に追加する必要があるもののために余地を残すことですが、この関数が呼び出された後に何も追加できず、理由がわからない。

<body>
<div id="grid"><div class="circle">hello</div></div>
<button onclick="addSquare()">add a Square</button>

<script language="JavaScript">
var g = {};
g.myGrid = document.getElementById("grid");

function addSquare() {

 // Calling cleanGrid() is giving me problems.
 // I want to wipe everything clean first and then add the divs of the 'square' class.
 // But instead it just clears the 'grid' div and doesn't allow anything to be added.
 cleanGrid();  // WHY NOT?

 var newSquare = document.createElement("div");
 newSquare.className = "square";
 newSquare.innerHTML = "square";
 g.myGrid.appendChild(newSquare);
}

function cleanGrid() {
 var x = document.getElementById("grid");
 while(x.childNodes) {
  var o = x.lastChild;
  x.removeChild(o);
 }
}
</script>

</body>
4

2 に答える 2

2

cleanGridあなたの関数は、あなたがコーディングしたようには機能しないと思います。x.childNodes空であっても真であり続けます（空NodeListは偽ではありません）。したがって、(呼び出し時に) 例外をスローしているか、無限にループしていると思われますremoveChild。これが (いずれにせよ) 他のコードが実行されていない理由です。デバッグ環境 (Firefox+Firebug、IE + Visual Studio、または開発ツールキットなど) で実行してみて、何が起こっているかを確認してください。

これは、すぐに使えるリワークですcleanGrid：

function cleanGrid() {
  var x = document.getElementById("grid");
  while (x.lastChild) {
    x.removeChild(x.lastChild);
  }
}

または、もちろん:

function cleanGrid() {
  document.getElementById("grid").innerHTML = "";
}

...innerHTML標準ではありませんが、すべての主要なブラウザーとほとんどのマイナーなブラウザーでサポートされているためです。

于 2009-09-25T07:55:10.877 に答える
0

TJ Crowder は、動作の背後にあるロジックでそれを突き止めました

ただし、これは機能します。

function cleanGrid() {
 var x = document.getElementById("grid");
 var len =x.childNodes.length;
 while(len) {
  x.removeChild(x.lastChild);
 --len;
 }
}
于 2009-09-25T07:58:52.727 に答える