जब मैं #बाउंड्री डिव में सिबलिंग डिव जोड़ता हूं, तो मैं अब #box चाइल्ड डिव की शैली नहीं बदल सकता। मैं क्या गलत कर रहा हूं? मेरे कोड का एक सरलीकृत संस्करण निम्नलिखित है:

let box = document.getElementById("box");
let boundary = document.getElementById("boundary")

//Adding this line prevents my code from changing the #box style to blue
boundary.innerHTML += "<div>A</div>"

document.addEventListener("keydown", function(event) {
  if (event.key == "ArrowDown") {
    box.style.backgroundColor = "blue"
  }
})
#box {
  width: 75px;
  height: 75px;
  background-color: green;
  border: solid black 1px;
  position: absolute;
  top: 100px;
  left: 100px;
}
<div id="boundary">
  <div id="box"></div>
</div>
1
kojow7 30 मार्च 2018, 00:15

2 जवाब

सबसे बढ़िया उत्तर

innerHTML में एक स्ट्रिंग जोड़ने से एक नया #box DOM एलिमेंट बन जाता है, और यह आपके कोड में box संदर्भ को तोड़ देता है। इसके बजाय Element.insertAdjacentHTML() का इस्तेमाल करें:

let box = document.getElementById("box");
let boundary = document.getElementById("boundary")

boundary.insertAdjacentHTML( 'beforeend', "<div>A</div>");

document.addEventListener("keydown", function(event) {
  if (event.key == "ArrowDown") {
    box.style.backgroundColor = "blue"
  }
})
#box {
  width: 75px;
  height: 75px;
  background-color: green;
  border: solid black 1px;
  position: absolute;
  top: 100px;
  left: 100px;
}
<div id="boundary">
  <div id="box"></div>
</div>

एक अन्य विकल्प let box = document.getElementById("box"); लाइन को हटाना है। यह काम करेगा क्योंकि id वाला प्रत्येक तत्व एक स्वचालित वैश्विक चर बनाता है< /a>, जो इसे संदर्भित करता है और स्वचालित रूप से अपडेट होता है।

let boundary = document.getElementById("boundary")

boundary.innerHTML += "<div>A</div>";

document.addEventListener("keydown", function(event) {
  if (event.key == "ArrowDown") {
    box.style.backgroundColor = "blue"
  }
})
#box {
  width: 75px;
  height: 75px;
  background-color: green;
  border: solid black 1px;
  position: absolute;
  top: 100px;
  left: 100px;
}
<div id="boundary">
  <div id="box"></div>
</div>
1
Ori Drori 29 मार्च 2018, 21:32

जब आप आंतरिक HTML में एक नई स्ट्रिंग जोड़ते हैं तो ऐसा लगता है कि आप #boudary के अंदर एक नई HTML सामग्री बनाते हैं, इसलिए आपके द्वारा चुना गया पुराना तत्व नए बनाए गए तत्व से अलग है।

इसे सत्यापित करने के लिए, डीओएम परिवर्तन के बाद अपने तत्व का चयन करें और आपको नया बनाया जाएगा और आप इसकी शैली को बदलने में सक्षम होंगे:

let boundary = document.getElementById("boundary")

boundary.innerHTML += "<div>A</div>";

//Here you select the new one
let box = document.getElementById("box");

document.addEventListener("click", function(event) {

  box.style.backgroundColor = "blue"

})
#box {
  width: 75px;
  height: 75px;
  background-color: green;
  border: solid black 1px;
  position: absolute;
  top: 100px;
  left: 100px;
}
<div id="boundary">
  <div id="box"></div>
</div>
2
Temani Afif 29 मार्च 2018, 21:30