Search code examples
javascripthtmlimagegetattribute

JavaScript getAttribute() method in image element

I would like to get the image source of an image element. What I have now is:

Html

<div class="item">
    <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Tomato_je.jpg" alt="" id="item-img">
    <h1>Tomato</h1>
    <h2>₹50</h2>
                
    <a href="#0" class="cd-add-to-cart js-cd-add-to-cart btn-grad" data-name="Tomato" data-price="50">Add To Cart</a>
</div>

Javascript

function addProduct(target) {
    //alert(target.getAttribute('data-name'), true)
    // this is just a product placeholder
    // you should insert an item with the selected product info
    // replace productId, productName, price and url with your real product info
    // you should also check if the product was already in the cart -> if it is, just update the quantity
    productId = productId + 1;
    productName=target.getAttribute('data-name'), true;
    productPrice=target.getAttribute('data-price'),true;
    var productAdded = '<li class="cd-cart__product"><div class="cd-cart__image"><a href="#0"><img src="assets/img/product-preview.png" alt="placeholder"></a></div><div class="cd-cart__details"><h3 class="truncate"><a href="#0">'+productName+'</a></h3><span class="cd-cart__price">'+productPrice+'</span><div class="cd-cart__actions"><a href="#0" class="cd-cart__delete-item">Delete</a><div class="cd-cart__quantity"><label for="cd-product-'+ productId +'">Qty</label><span class="cd-cart__select"><select class="reset" id="cd-product-'+ productId +'" name="quantity"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select><svg class="icon" viewBox="0 0 12 12"><polyline fill="none" stroke="currentColor" points="2,4 6,8 10,4 "/></svg></span></div></div></div></li>';

    cartList.insertAdjacentHTML('beforeend', productAdded);
};

I am able to get the name and price of the item, but not able to get the image source. The output of my code is like in the image below and I would like to have the image in the red circled area

image

Solution

  • So you have a reference to the link. The image is a sibling so you need a way to reference it. Easiest way is to select their common parent and than select the image.

    var parentElement = target.closest(".item");
var image = parentElement.querySelector("img");
console.log(image);

    Other notes. Get rid of that , true on all the lines. And declare your variables.

    var productId = 0;
function addProduct(target) {
  productId = productId + 1;
  var productName = target.dataset.name;
  var productPrice = target.dataset.price;
  var parentElement = target.closest(".item");
  var image = parentElement.querySelector("img");
  var imgSrc = image.getAttribute("src");
  console.log(productName, productPrice, imgSrc);
};

document.querySelector(".cd-add-to-cart").addEventListener("click", function () {
  addProduct(this);
});
    img { width: 100px; }
    <div class="item">
  <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Tomato_je.jpg" alt="" id="item-img">
  <h1>Tomato</h1>
  <h2>₹50</h2>
  <a href="#0" class="cd-add-to-cart js-cd-add-to-cart btn-grad" data-name="Tomato" data-price="50">Add To Cart</a>
</div>