Po klknieciu tego podmień zawartość tego diva.

Question

Chce zrobić coś takiego, żeby po kliknięciu np. Trening nóg w divie obok zmieniła się treść, wiem że to wykonać można za pomocą innerHTML i tak bym chciał zrobić, ale nie wiem jak wybrać w javascript konkretny paragraf, mam coś takiego.

        <div id="lista">
        <h2>Lista treningów.</h2>
        <p>Trening nóg</p>
        <p>Trening nóg</p>
        <p>Trening nóg</p>
        <p>Trening nóg</p>
        <p>Trening nóg</p>
        <p>Trening nóg</p>
        <p>Trening nóg</p>
        <p>Trening nóg</p>
        <p>Trening nóg</p>
        <p>Trening nóg</p>
        <p>Trening nóg</p>
        <p>Trening nóg</p>
    </div>

 

Jak zrobić w javascript kod który będzie wiedział co teraz kliknalem, zamiast robić p1,p2,p3,p4,p5.

Answer 1

document.getElementById(this)
Tak to chyba działało, długo nie pisałem w JS, ale na 99% tak to się robiło, odwołujesz sie do obiektu który wywołał funkcję.

Answer 2

o właśnie ja kiedyś też się nad tym zastanawiałam ;)
i zrobiłam to tak, że pobrałam wszystkie te elementy np querySelectorAll('element') i do nich dałam funkcję po kliknięciu, w której użyłam this do zdobycia tego klikniętego elementu ;p

działać działało, ale nadal nie wiem, jaki sposób jest najlepszy na takie coś

Comments

Dzięki :D, zanim odpisałaś to wymysliłem zeby do kazdego paragrafu dac onclicka innego :D 

<script>
function zmientenelement(){
    document.getElementById('treining-div-information').innerHTML ="Hello world!";
}    
    
 function zmientenelement2(){
    document.getElementById('treining-div-information').innerHTML ="Hello world2!";
}    
</script>
    

 

---

hahah też by zadziałało, ale kod by fajnie wyglądał

Answer 3

Poczytaj o event delegation.

Answer 4

Vorex444, możesz przekazać do wskazanego diva kliknięty paragraf za pomocą właściwości target pobierając ją z event funkcji addEventListener. Warto sprawdzić, jak w Twoim przypadku jedynie pierw czy jest ono tym czym czego oczekujesz. Przykład:

document.getElementById("lista").addEventListener("click",function(event){
   if(event.target.nodeName == "P") console.log(event.target)
})

cały kod: https://codepen.io/anon/pen/VbjQeY