Javascript & Blogspot - getElementById

Aici postaţi orice este legat de tehnologiile "client side". HTML, HTML5, XHTML, CSS, CSS3, XML, Standarde
Manual JS: http://www.phpromania.net/jsmanual/index.html

Moderatori: eyecon, Moderatori

BlagaLudovico
New Member
Mesaje: 3
Membru din: Vin Apr 07, 2017 9:43 pm

Javascript & Blogspot - getElementById

Mesajde BlagaLudovico » Vin Apr 07, 2017 9:57 pm

Buna seara. Am o mica problema cu un cod javascript. Da, este vorba despre webdesign. Am un site creat pe o platforma gratuita si anume blogspot. Am implementat un javascript pentru a extrage continutul unui div si a-l afisa intr-un hover in homepage. Daca se poate pentru a fi mai explicit, puteti cauta pe google: AnimeOki. Este vorba despre desene animate japoneze, o pasiune veche a mea.

Acesta este codul javascript.

Cod: Selectaţi tot

<script>
var firstDivContent = document.getElementById('mydiv1');
    var secondDivContent = document.getElementById('mydiv2');
    secondDivContent.innerHTML = firstDivContent.innerHTML;
</script>


Acesta este codul html.

Cod: Selectaţi tot

 <div id="mydiv1">
    <div id="div1">11</div>
</div>

<div id="mydiv2">
    <div id="div1">11</div>
</div>


Acesta este containerul din interiorul post-ului

Cod: Selectaţi tot

<div id="mydiv1">

Cod: Selectaţi tot

<div id="mydiv2">

Acesta este containerul din homepage care primeste continutul container-ului

Cod: Selectaţi tot

<div id="mydiv1">
.


Problema este urmatoarea. Doar in cazul ultimei postari se realizeaza actiunea. Daca verific si pentru a 2-a, a 3-a, s.a.m.d nu imi afiseaza nimic, getElementById arata ca este null. Cineva? Oricine? Va rog, fara supraestimare inca de la ora 10 pana la ora 22 m-am chinuit si tot nu am reusit sa-i dau de cap. Tin sa precizez: sunt incepator intr-ale javascript-ului. Daca ma poate ajuta cineva cu exemple sau de la 0 as fi recunoscator.

Va multumesc.
Ludovico.



nevvermind
Senior Member
Mesaje: 1235
Membru din: Mar Iun 22, 2010 3:17 pm

Re: Javascript & Blogspot - getElementById

Mesajde nevvermind » Vin Apr 07, 2017 11:17 pm

Problema ta este ca incerci sa preiei un element (folosind getElementById()), inainte de a fi creat. Vezi aici: https://jsfiddle.net/dnvyrssb/1/

Deci, la executarea unui script JS care manipuleaza elemente, trebuie sa te asiguri initial ca documentul este complet initializat (in termeni JS, asta se numeste "dom ready"). De asta unii pun tag-ul script la sfarsitul documentului, fix inainte de tag-ul </body>.

Si cum te repeti, am gasit ca-i mai bine sa faci o functie:

Cod: Selectaţi tot

<body>

  <!-- chestii multe aci -->

  <script>
      function transferContent(firstDivId, secondDivId) {
          var firstDivContent = document.getElementById(firstDivId);
          var secondDivContent = document.getElementById(secondDivId);
          secondDivContent.innerHTML = firstDivContent.innerHTML;
      }

      transferContent("mydiv6", "mydiv2");
      transferContent("mydiv3", "mydiv1");
  </script>
</body>

Facusi un canal de php pe freenode - ##php-ro : https://webchat.freenode.net/

BlagaLudovico
New Member
Mesaje: 3
Membru din: Vin Apr 07, 2017 9:43 pm

Re: Javascript & Blogspot - getElementById

Mesajde BlagaLudovico » Sâm Apr 08, 2017 1:02 pm

Cum am zis sunt un adevarat noob. Deci ai facut o functie, si la final unde ai pus transferContent("mydiv6", "mydiv2"); inseamna ca preia continutul din mydiv6 si il afiseaza in mydiv2? Bun. Dar o mica intrebare daca este posibil... Pote fi creeat un singur container care sa primeasca continut si sa isi faca update pentru fiecare div ce vreau sa fie afisat? Adica am spre exemplu divX, acesta este containerul de homepage, si am alte 5 divuri fiecare in cate un articol ca urmeaza a fi afisat in homepage: div1, div2, div3, div4, div5. Fiecare din div-urile astea are un anumit continut, continut ce ii corespunde unui anumit articol. DivX isi poate face update pentru fiecare div?

Sa editez pe codul tau dar sper sa nu fac o foarte mare ,,balarie"...

Cod: Selectaţi tot

<body>

  <!-- chestii multe aci -->

  <script>
      function transferContent(firstDivId, secondDivId) {
          var firstDivContent = document.getElementById(firstDivId);
          var secondDivContent = document.getElementById(secondDivId);
          secondDivContent.innerHTML = firstDivContent.innerHTML;
      }

      transferContent("mydiv2", "mydiv1");
      transferContent("mydiv3", "mydiv1");
  </script>
</body>

nevvermind
Senior Member
Mesaje: 1235
Membru din: Mar Iun 22, 2010 3:17 pm

Re: Javascript & Blogspot - getElementById

Mesajde nevvermind » Sâm Apr 08, 2017 2:39 pm

Daca faci asa:

transferContent("mydiv2", "mydiv1");
transferContent("mydiv3", "mydiv1");

...nu e bine (functional), fiindca prima apelare va adauga continutul lui mydiv2 in mydiv1, iar a doua apelare va pune continutul lui mydiv3 TOT in mydiv1, adica va suprascrie continutul.


Cred ca ar fi bine sa-mi descrii ce vrei sa faci de fapt, in limbaj natural, fara sa vorbim despre div-uri si js. Apoi vedem. Ce feature vrei de fapt? Daca vrei tooltips, cred ca asta e mai potrivit: http://www.tippedjs.com/.

Daca iti convine ala, numai confirma, si incerc sa-ti dau un snippet ceva, pe care sa-l poti copia pe site-ul tau.
Facusi un canal de php pe freenode - ##php-ro : https://webchat.freenode.net/


Înapoi la “HTML/JavaScript/CSS”

Cine este conectat

Utilizatori ce ce navighează pe acest forum: Bing [Bot] și 1 vizitator