Új hozzászólás Aktív témák

• btz addikt

  #7945

  #7927 btz

  2020-06-28 22:36:46

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  btz

  addikt

  #7927 btz

  #7927 btz

  Közben másik fórumon sikerült megoldani a problémát.

  Ez az eredeti nem működő kód CODESANDBOX

  Az ebben lévő addEventListener nem tudta elérni a #testclick ID-jű elemet.
  <script>
let output = document.querySelector("#output");
let testclick = document.querySelector("#testclick");
testclick.addEventListener("click", testclickevent());
function testclickevent() {
output.innerHTML = "TEST CLICK IS WORKING";
}
</script>

  A működő kód

  Ebben az alábbi kód szerepel

  <script>
document.addEventListener("click", function(e) {
var elem = e.target;
if (elem && elem.id == "testclick") {
output.innerHTML = "THIS SOLUTION IS WORKING";
}
});
</script>
  Teljesen még nem tiszta, hogyan is képes látni ez a content.html-ben lévő button ID-t, de működik. Gombnyomásra kiírja, hogy "THIS SOLUTION IS WORKING"

  

  [HTML beágyazott kód QuerySelector működés]

  Közben felmerült a kérdés, hogy ha a content.html output2 elemébe nem klikk eseménykor, hanem betöltéskor, akarok berakni valamit, akkor azt hogyan tehetem meg. Sajnos csak ilyen csúnya megoldás jutott eszembe:

  setTimeout(function() {
var output2var = document.getElementById("output2");
output2var.innerHTML = "OUTPUT2 IS WORKING";
}, 1000);

  TELJES KÓD

  Azaz setTimeoutal megvárom a teljes betöltést. Elég gány.

• btz addikt

  #7932

  #7927 btz

  2020-06-24 23:53:18

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  btz

  addikt

  #7927 btz

  #7927 btz

  Közben másik fórumon sikerült megoldani a problémát.

  Ez az eredeti nem működő kód CODESANDBOX

  Az ebben lévő addEventListener nem tudta elérni a #testclick ID-jű elemet.
  <script>
let output = document.querySelector("#output");
let testclick = document.querySelector("#testclick");
testclick.addEventListener("click", testclickevent());
function testclickevent() {
output.innerHTML = "TEST CLICK IS WORKING";
}
</script>

  A működő kód

  Ebben az alábbi kód szerepel

  <script>
document.addEventListener("click", function(e) {
var elem = e.target;
if (elem && elem.id == "testclick") {
output.innerHTML = "THIS SOLUTION IS WORKING";
}
});
</script>
  Teljesen még nem tiszta, hogyan is képes látni ez a content.html-ben lévő button ID-t, de működik. Gombnyomásra kiírja, hogy "THIS SOLUTION IS WORKING"

  

  Közben kaptam egy újabb jó megoldást 🙂

  
  Amúgy szép látni, hogy egy egy probléma megoldására milyen sokféle megoldás létezik 🙂

• disy68 aktív tag

  #7930

  #7927 btz

  2020-06-23 10:23:16

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  disy68

  aktív tag

  #7927 btz

  #7927 btz

  Közben másik fórumon sikerült megoldani a problémát.

  Ez az eredeti nem működő kód CODESANDBOX

  Az ebben lévő addEventListener nem tudta elérni a #testclick ID-jű elemet.
  <script>
let output = document.querySelector("#output");
let testclick = document.querySelector("#testclick");
testclick.addEventListener("click", testclickevent());
function testclickevent() {
output.innerHTML = "TEST CLICK IS WORKING";
}
</script>

  A működő kód

  Ebben az alábbi kód szerepel

  <script>
document.addEventListener("click", function(e) {
var elem = e.target;
if (elem && elem.id == "testclick") {
output.innerHTML = "THIS SOLUTION IS WORKING";
}
});
</script>
  Teljesen még nem tiszta, hogyan is képes látni ez a content.html-ben lévő button ID-t, de működik. Gombnyomásra kiírja, hogy "THIS SOLUTION IS WORKING"

  

  A te példádban az a legfőbb gond, hogy az ajax hívás aszinkron (XMLHttpRequest) és amikor hivatkoznál a testclick id-jú elemre, az még nincs benne a dom-ban. Az után tudsz csak rá hivatkozni, hogy az ajax kérés lefutott.

  Erre az egyik lehetőség egy callback lehet, ami akkor lesz meghívva, amikor a content már bekerült a dom-ba.

  Hogy legyen más is mint a korábbi minta, a lekérést átírtam fetch api-ra, meg kiszedtem a fölösleget, hogy átláthatóbb legyen: link

• cattus addikt

  #7928

  #7927 btz

  2020-06-22 20:34:59

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  cattus

  addikt

  #7927 btz

  #7927 btz

  Közben másik fórumon sikerült megoldani a problémát.

  Ez az eredeti nem működő kód CODESANDBOX

  Az ebben lévő addEventListener nem tudta elérni a #testclick ID-jű elemet.
  <script>
let output = document.querySelector("#output");
let testclick = document.querySelector("#testclick");
testclick.addEventListener("click", testclickevent());
function testclickevent() {
output.innerHTML = "TEST CLICK IS WORKING";
}
</script>

  A működő kód

  Ebben az alábbi kód szerepel

  <script>
document.addEventListener("click", function(e) {
var elem = e.target;
if (elem && elem.id == "testclick") {
output.innerHTML = "THIS SOLUTION IS WORKING";
}
});
</script>
  Teljesen még nem tiszta, hogyan is képes látni ez a content.html-ben lévő button ID-t, de működik. Gombnyomásra kiírja, hogy "THIS SOLUTION IS WORKING"

  

  Teljesen még nem tiszta, hogyan is képes látni ez a content.html-ben lévő button ID-t

  Két dolog miatt. Egyrészt, mert az egész document-re raktad rá az event listener-t, tehát az minden egyes, az oldalon történt click eseményre (attől függetlenül, hogy mire kattintottál) le fog futni. (Ezt alapvetően én nem nagyon ajánlanám, jobb az, ha az egyes event listener-eknek csak akkor futnak le, ha szükséges)
  A másik dolog pedig a JavaScript event capure mechanizmusa, amivel a click esemény végigfolyik a DOM elemein.

Új hozzászólás Aktív témák