Click duplicate button using JS-CodePudding

Im making a movie review page, i use a button to change the qualification.

How can i get the name of the movie when i press the button?

<div  id="container-movies">
                <div >
                    <span  id="title">Transformers</span>
                    <p >
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore soluta ullam officiis tempore sapiente, nesciunt veniam. Vitae explicabo labore soluta quis, omnis vero nulla, dignissimos necessitatibus repellat perferendis quisquam laboriosam.
                    </p>
                    <span >gen</span>
                    <div >
                        <span >4</span>
                        <button id="cal-btn">qualify</button>
                    </div>
                </div>
                <div >
                    <span  id="title">movie title</span>
                    <p >
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. At, sint fugit numquam dicta aperiam neque aliquam expedita ipsum sapiente assumenda rerum temporibus fuga similique sed, perspiciatis qui ipsa nihil adipisci.
                    </p>
                    <span >gen</span>
                    <div >
                        <span >4</span>
                        <button id="cal-btn">qualify</button>
                    </div>
                </div>

This only sends me the name of the first node:

let cal = document.getElementById("cal-btn");
cal.addEventListener('click', getcal);

CodePudding user response：

You can grab the constent of the id="title" and use it in the getcal function

const movieTitle = document.getElementById("title").innerText

CodePudding user response：

document.getElementById("cal-btn"); will only return one element because ids are unique, you should use a class instead.

For each button, add a listener on click. Then because of the structure, search for the closest parent movie to find the title inside.

for (let btn of document.getElementsByClassName("cal-btn")) {
  btn.addEventListener("click", () => {
    console.log(btn.closest(".movie").querySelector(".title").textContent)
  })
}

<div >
  <span >Transformers</span>
  <button >vote</button>
</div>

<div >
  <span >Another film</span>
  <button >vote</button>
</div>

CodePudding user response：

You cant use the same id over and over again, in this case you should use a class or an custom attribute select all buttons and loop through them and call your function

let calBtns = document.querySelectorAll(".cal-btn");

calBtns.forEach(btn => {
  btn.addEventListener('click', ()=>{
    alert(btn.closest('.movie').querySelector('.title').innerText)
  });
})

<div  id="container-movies">
<div >
    <span >Transformers</span>
    <p >Lorem ipsum</p>
    <span >gen</span>
    <div >
        <span >4</span>
        <button >qualify</button>
    </div>
</div>
<hr>
<div >
    <span >movie title</span>
    <p >Lorem, ipsum</p>
    <span >gen</span>
    <div >
        <span >4</span>
        <button >qualify</button>
    </div>
</div>