لماذا تمنعني removechild () من القيام الملحق () ضمن وظيفة JavaScript؟

StackOverflow https://stackoverflow.com/questions/1475937

  •  16-09-2019
  •  | 
  •  

سؤال

في هذا الرمز عند استدعاء الدالة CleanGrid ()، كان هدفي هو التخلص من DIV كانت كانت دائرة "دائرة" واستبدالها بحم مع فئة "مربع". لما أستخدمه حقا هذا الرمز لأنهم غير قادرون على استبدال العناصر حتى لا تعمل Replyechild (). إذا قمت بتعليق الدالة الدالة لتنظيف () يتم تشغيل التعليمات البرمجية بشكل جيد ويضيف الزر فقط Div مع "مربع" لكل نقرة. ما أريد أن يحدث في الواقع هو من أجل cleangrid () لإزالة كل ما هو في مجال "الشبكة" وغرفة مغادرة لأي شيء يجب أن تضاف بعد أن يتم استدعاء هذه الوظيفة - ولكن لا يمكن إضافة أي شيء بعد هذه الوظيفة غير متأكد من السبب.

<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>
هل كانت مفيدة؟

المحلول

لا أعتقد بك cleanGrid ستعمل الدالة بالطريقة التي ترميزها بها. x.childNodes سوف تستمر في أن تكون صادقة حتى لو كانت فارغة (فارغة NodeList ليس frory). لذلك أظن أن رمي استثناء (على removeChild استدعاء) أو حلقات لا نهاية لها، والتي (في كلتا الحالتين) هي لماذا لا يعمل رمز آخر. حاول تشغيله في بيئة تصحيح الأخطاء (Firefox + Firebug، IE + Visual Studio أو مجموعة أدوات Dev، أيا كان) حيث يمكنك أن ترى ما يحدث.

إليك إعادة صياغة خارج الكفة cleanGrid:

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

أو بالطبع:

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

...حيث innerHTML, ، وإن لم يكن معيارا، يتم دعمها من قبل جميع المتصفحات الرئيسية ومعظم تلك الصغيرة.

نصائح أخرى

مسمر TJ المزدوج مع المنطق وراء السلوك

ومع ذلك، فإن هذا سيعمل:

function cleanGrid() {
 var x = document.getElementById("grid");
 var len =x.childNodes.length;
 while(len) {
  x.removeChild(x.lastChild);
 --len;
 }
}
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top