Html Question posted in
Some basic documentation can be found here.

Html – How to change the src of a specific element (which was clicked) using Java Script? (Others should not change)

I’m writing a website and I have several identical product cards on the page. The card has a photo of the favorite icon. I need the src of the image to change when I hover over it. The src of the exact image that was pointed at changed. What complicates the situation is that all my cards have the same classes, and I cannot choose a specific one.

<div class="main-card">
    <div class="main-card-img-holder">
        <a href="#">
            <img src="img/images/aj4PSG.png" alt="" class="main-card-img">
        </a>
    </div>
    <a href="#" class="main-card-name"><p><b>Nike AirJordan 4 Retro PSG</b></p></a>
    <div class="main-price-holder">
        <p class="main-card-true-price">4 </p>
        <p class="main-card-false-price">8</p>
    </div>
    <div class="main-add-to-cart-div">
        <a href="#" class="main-add-to-cart-fav"><img src="img/icons/favorite.png" alt="" class="FavIcon"></a>
        <a href="#" class="main-add-to-cart-link"><b>add to cart</b></a>
    </div>
</div>

i was trying GetElementById, but it returns only first element, not all. I also tried querySelectorAll

Tags:

3

Answers


  1. 0

    Why aren’t you adding id to your cards? That way, you can write your JavaScript code to identify which element is selected and then you can obtain attributes of the selected element using getElementById(‘id’).

    Here in your code, I’m presuming this is the div you want to be selected:

    <div class="main-add-to-cart-div">
    <a href="#" class="main-add-to-cart-fav"><img src="img/icons/favorite.png" alt="" class="FavIcon"></a>
    <a href="#" class="main-add-to-cart-link"><b>add to cart</b></a>
</div>

    You can id to class to identify it uniquely and then obtain img’s src.

    <div class="main-add-to-cart-div" id="myID">
    <a href="#" class="main-add-to-cart-fav"><img src="img/icons/favorite.png" alt="" class="FavIcon"></a>
    <a href="#" class="main-add-to-cart-link"><b>add to cart</b></a>
</div>

    Now, you can select class and then subsequently child element with id.

    If you are using jquery, it would become easier for selecting/identifying elements.

    Login or Signup to reply.
  2. 0

    Using delegated event listeners bound to a suitable parent you can use the event itself to identify elements by inspecting the event.target &/or event.currentTarget – from there you can use standard DOM navigation techniques (parent,child,sibling selectors) and fashion your image change logic accordingly.

    You did not make clear what the image sources are to change to – as you referenced the favourite icon I understood that to mean swap the main img src for the favourite icon src – most likely a false assumption but this might help

    // The suitable parent container upon which we bind the delegated event listeners
const container=document.querySelector('#SOMEPARENT');

// mouseover - find all images & their sources
// as there are only 2 per `main-card` DIV you
// can simply swap sources like this...
// the same logic swaps sources back
const swapsources=(e)=>{
  if( e.target!=e.currentTarget ){
    let col=e.target.closest('div.main-card').querySelectorAll('img');
    let srcs=[...col].map(n=>n.src);
    col[0].src=srcs[1];
    col[1].src=srcs[0];
  }
}


container.addEventListener('mouseover',swapsources);
container.addEventListener('mouseout',swapsources);
    .main-card {
  display: inline-block;
  border: 1px solid black;
  margin: 1rem;
  padding: 1rem;
  background:white;
}

#SOMEPARENT{background:pink}
    <div id='SOMEPARENT'>
  <div class="main-card">
    <div class="main-card-img-holder">
      <a href="#">
        <img src="//placekitten.com/200/300?image=1" alt="" class="main-card-img">
      </a>
    </div>
    <a href="#" class="main-card-name">
      <p><b>Nike AirJordan 4 Retro PSG</b></p>
    </a>
    <div class="main-price-holder">
      <p class="main-card-true-price">4 </p>
      <p class="main-card-false-price">8</p>
    </div>
    <div class="main-add-to-cart-div">
      <a href="#" class="main-add-to-cart-fav"><img src="//placekitten.com/200/300?image=5" alt="" class="FavIcon"></a>
      <a href="#" class="main-add-to-cart-link"><b>add to cart</b></a>
    </div>
  </div>

  <div class="main-card">
    <div class="main-card-img-holder">
      <a href="#">
        <img src="//placekitten.com/200/300?image=2" alt="" class="main-card-img">
      </a>
    </div>
    <a href="#" class="main-card-name">
      <p><b>Yellow Banana Boots</b></p>
    </a>
    <div class="main-price-holder">
      <p class="main-card-true-price">54 </p>
      <p class="main-card-false-price">89</p>
    </div>
    <div class="main-add-to-cart-div">
      <a href="#" class="main-add-to-cart-fav"><img src="//placekitten.com/200/300?image=4" alt="" class="FavIcon"></a>
      <a href="#" class="main-add-to-cart-link"><b>add to cart</b></a>
    </div>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    You can realize the hover script without having any id attributes. Use the ev.target of the hover event instead in order to identify the element concerned:

    const body=document.querySelector("body"),
// define the hover picture here:
    hpic="https://picsum.photos/id/4/200/150";
["mouseover","mouseout"].forEach(ev=>body.addEventListener(ev,hover));

function hover(ev){
  const t=ev.target;
  // apply the hover logic on class "main-card-img" elements only:
  if (!t.classList.contains("main-card-img")) return;
  // first time the event is triggered for an element:
  if (!t.dataset.src) t.dataset.src=hpic;
  // swap picture sources when hovering:
  [t.src,t.dataset.src]=[t.dataset.src,t.src];
}
    .FavIcon {width:32px}
    <div class="main-card">
<div class="main-card-img-holder">
    <a href="#">
        <img src="https://picsum.photos/id/1/200/150" alt="" class="main-card-img">
    </a>
</div>
<a href="#" class="main-card-name"><p><b>Nike AirJordan 1 Retro PSG</b></p></a>
<div class="main-price-holder">
    <p class="main-card-true-price">4 </p>
    <p class="main-card-false-price">8</p>
</div>
<div class="main-add-to-cart-div">
    <a href="#" class="main-add-to-cart-fav"><img src="https://cdn-icons-png.flaticon.com/128/4379/4379542.png" alt="" class="FavIcon"></a>
    <a href="#" class="main-add-to-cart-link"><b>add to cart</b></a>
</div>
</div>
<div class="main-card">
<div class="main-card-img-holder">
    <a href="#">
        <img src="https://picsum.photos/id/2/200/150" alt="" class="main-card-img">
    </a>
</div>
<a href="#" class="main-card-name"><p><b>Nike AirJordan 2 Retro PSG</b></p></a>
<div class="main-price-holder">
    <p class="main-card-true-price">4 </p>
    <p class="main-card-false-price">8</p>
</div>
<div class="main-add-to-cart-div">
    <a href="#" class="main-add-to-cart-fav"><img src="https://cdn-icons-png.flaticon.com/128/4379/4379542.png" alt="" class="FavIcon"></a>
    <a href="#" class="main-add-to-cart-link"><b>add to cart</b></a>
</div>
</div>
<div class="main-card">
<div class="main-card-img-holder">
    <a href="#">
        <img src="https://picsum.photos/id/3/200/150" alt="" class="main-card-img">
    </a>
</div>
<a href="#" class="main-card-name"><p><b>Nike AirJordan 4 Retro PSG</b></p></a>
<div class="main-price-holder">
    <p class="main-card-true-price">4 </p>
    <p class="main-card-false-price">8</p>
</div>
<div class="main-add-to-cart-div">
    <a href="#" class="main-add-to-cart-fav"><img src="https://cdn-icons-png.flaticon.com/128/4379/4379542.png" alt="" class="FavIcon"></a>
    <a href="#" class="main-add-to-cart-link"><b>add to cart</b></a>
</div>
</div>

    Like Professor Abronsius I am also using delegated event handling. I add the events.to the body element and filter out only those elements having the class "main-card-img".

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search