How to Select All Id in HTML Page-CodePudding

I want to select all Id in HTML page. But it's not happening. My code is working at first element.

I used querySelector, querySelectorAll, getElementById, GetElementByClassName but everytime my code run at first Id

//* DOM
let plusIconDOM = document.querySelector(".plusIcon")
let minusIconDOM = document.querySelector(".minusIcon")
let cardTextDOM = document.querySelector("#cardText")

minusIconDOM.addEventListener("click", function() {
  plusIconDOM.classList.remove("d-none")
  cardTextDOM.classList.add("d-none")
  minusIconDOM.classList.add("d-none")
})

plusIconDOM.addEventListener("click", function() {
  minusIconDOM.classList.remove("d-none")
  cardTextDOM.classList.remove("d-none")
  plusIconDOM.classList.add("d-none")
})

<card >
  <div >
    <p >Lorem ipsum dolor sit amet.</p>
    <p  id="cardText">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum ea libero expedita debitis dolorum quos non ad sit, impedit dolore aliquam sed rerum dolorem nam provident iusto voluptatum, neque corrupti amet aliquid a rem alias quisquam pariatur! Quae
      consequatur minima obcaecati iusto eos blanditiis deleniti?</p>
    <button >
                        <img width="25px"  src="https://www.iconpacks.net/icons/1/free-plus-icon-321-thumb.png" alt="">
                    </button>
    <button >
                        <img width="25px"  src="https://www.iconpacks.net/icons/2/free-minus-icon-3108-thumb.png" alt="">
                    </button>
  </div>
</card>
<card >
  <div >
    <p >Lorem ipsum dolor sit amet.</p>
    <p  id="cardText">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum ea libero expedita debitis dolorum quos non ad sit, impedit dolore aliquam sed rerum dolorem nam provident iusto voluptatum, neque corrupti amet aliquid a rem alias quisquam pariatur! Quae
      consequatur minima obcaecati iusto eos blanditiis deleniti?</p>
    <button >
                        <img width="25px"  src="https://www.iconpacks.net/icons/1/free-plus-icon-321-thumb.png" alt="">
                    </button>
    <button >
                        <img width="25px"  src="https://www.iconpacks.net/icons/2/free-minus-icon-3108-thumb.png" alt="">
                    </button>
  </div>
</card>
<card >
  <div >
    <p >Lorem ipsum dolor sit amet.</p>
    <p  id="cardText">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum ea libero expedita debitis dolorum quos non ad sit, impedit dolore aliquam sed rerum dolorem nam provident iusto voluptatum, neque corrupti amet aliquid a rem alias quisquam pariatur! Quae
      consequatur minima obcaecati iusto eos blanditiis deleniti?</p>
    <button >
                        <img width="25px"  src="https://www.iconpacks.net/icons/1/free-plus-icon-321-thumb.png" alt="">
                    </button>
    <button >
                        <img width="25px"  src="https://www.iconpacks.net/icons/2/free-minus-icon-3108-thumb.png" alt="">
                    </button>
  </div>
</card>

CodePudding user response：

IDs need to be unique
If you delegate you do not NEED IDs

document.getElementById("wrapper").addEventListener("click", function(e) {
  const tgt = e.target;
  const isPlus = tgt.matches(".plusIcon");
  const isMinus = tgt.matches(".minusIcon");
  if (!isPlus && !isMinus) return // not one of the plus or minus
  const parent = tgt.closest(".card-body");
  let plusIconDOM = parent.querySelector(".plusIcon");
  let minusIconDOM = parent.querySelector(".minusIcon");
  let cardTextDOM = parent.querySelector(".card-text");
  plusIconDOM.classList.toggle("d-none", isPlus);
  cardTextDOM.classList.toggle("d-none", isMinus);
  minusIconDOM.classList.toggle("d-none", isMinus);
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css" />
<div id="wrapper">
  <card >
    <div >
      <p >Lorem ipsum dolor sit amet.</p>
      <p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum ea libero expedita debitis dolorum quos non ad sit, impedit dolore aliquam sed rerum dolorem nam provident iusto voluptatum, neque corrupti amet aliquid a rem alias quisquam pariatur! Quae consequatur minima obcaecati iusto eos blanditiis deleniti?</p><button ><img width="25px"  src="https://www.iconpacks.net/icons/1/free-plus-icon-321-thumb.png" alt=""></button><button ><img width="25px"  src="https://www.iconpacks.net/icons/2/free-minus-icon-3108-thumb.png" alt=""></button>
    </div>
  </card>
  <card >
    <div >
      <p >Lorem ipsum dolor sit amet.</p>
      <p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum ea libero expedita debitis dolorum quos non ad sit, impedit dolore aliquam sed rerum dolorem nam provident iusto voluptatum, neque corrupti amet aliquid a rem alias quisquam pariatur! Quae consequatur minima obcaecati iusto eos blanditiis deleniti?</p><button ><img width="25px"  src="https://www.iconpacks.net/icons/1/free-plus-icon-321-thumb.png" alt=""></button><button ><img width="25px"  src="https://www.iconpacks.net/icons/2/free-minus-icon-3108-thumb.png" alt=""></button>
    </div>
  </card>
  <card >
    <div >
      <p >Lorem ipsum dolor sit amet.</p>
      <p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum ea libero expedita debitis dolorum quos non ad sit, impedit dolore aliquam sed rerum dolorem nam provident iusto voluptatum, neque corrupti amet aliquid a rem alias quisquam pariatur! Quae consequatur minima obcaecati iusto eos blanditiis deleniti?</p><button ><img width="25px"  src="https://www.iconpacks.net/icons/1/free-plus-icon-321-thumb.png" alt=""></button><button ><img width="25px"  src="https://www.iconpacks.net/icons/2/free-minus-icon-3108-thumb.png" alt=""></button>
    </div>
  </card>
</div>

CodePudding user response：

You don't bind addEventListener for every elements. Better approach is

i) wrap the card contents into a single parent Dom.

ii) Add click event Listener for the parent Dom, provide id and purpose attribute for and - icon.

iii) Inside the click handler function do actions based on the event.target.id and event.target.getAttribute("purpose").

Hope this will resolve your usecase.

CodePudding user response：

you can try this :

document.querySelectorAll('*[id]')