How can I reach specific div in JavaScript?

Question

I have a plp page which are listed items. And user can favorite any item. My problem is when the user favorite one item, I want to change star icon it should be show favorited.

Here my item structure:

<div class="product-tile-top">
                <div class="product-tile-top-inner tile-wishlist">
                    <span role="button" class="wish-list-icon" id="grc398342">
                      <div class="btn btn-default btn-sm pdp-wishlist-btn">
                          <span>
                              <img class="favorite" src="/_ui/responsive/common/images/favorite.svg" height="17px;">
                                  </span>
                      </div>
                    </span>
                </div>
              </div>

Every item has unique id like this:

<span role="button" class="wish-list-icon" id="grc398342">

So, I want to reach and change only this section when user favorite:

<span>
   <img class="favorite" src="/_ui/responsive/common/images/favorite.svg" height="17px;">
</span>

I changed my code like this but its not running?

var newURL = "/_ui/responsive/common/images/favorite-red.svg";
    function fav(elemId){
        $("#elemId").find(".favorite").attr("src", newURL)
    }
    $('#addBtn').click(function() {
        var listName = $('#listName').val();
        var productCode = $('#productCode').val();
        $('#notificationP').text('');
        if (listName.trim() == '') {
            $('#notificationP').text($('#nameValidate').val());
            return;
        }
        $('.loading-overlay').show();
        $.ajax({
            type : "POST",
            url : ACC.config.encodedContextPath + "/wishlist/add",
            data : 'productCode=' + productCode + '&listName=' + listName,
            success : function(loginPopup) {
                $('.loading-overlay').hide();
                if (loginPopup.code == '0' || loginPopup.code == '2') {
                    $('#notificationP').text($('#duplicate').val());
                } else if (loginPopup.code == '1') {
                    $('#notificationP').text($('#add').val());
                    fav(productCode);
                }
                else if(loginPopup.code == '3'){
                    $('#notificationP').text($('#maxProductsError').val()+' '+loginPopup.errorCodeMeg+')');
                }
                else {
                    $('#notificationP').text($('#globleError').val());
                }
            },
            error : function(error) {
                $('.loading-overlay').hide();
                $('#notificationP').text($('#globleError').val());
            }
        });
    });

How can I access this image?

Answer 1

You can use .find() method on the passed element in jquery like this. We give .find() the class name of the image and then change src attribute of the image. In this example if you click on the icon it will change to a star.

 var newURL = "https://img.freepik.com/free-vector/start_53876-25533.jpg?size=338&ext=jpg"; function fav(elem){ $(elem).find(".favorite").attr("src", newURL) } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="product-tile-top"> <div class="product-tile-top-inner tile-wishlist"> <span role="button" class="wish-list-icon" id="grc398342" onclick="fav(this)"> <div class="btn btn-default btn-sm pdp-wishlist-btn"> <span> <img class="favorite" src="https://img.freepik.com/free-vector/yellow-star-trail-set_23-2147739091.jpg?size=338&ext=jpg" height="17px;"> </span> </div> </span> </div> </div> 

As for your comment how to do this in ajax. You can return the item id in your ajax call and then access it like this

 var newURL = "https://img.freepik.com/free-vector/start_53876-25533.jpg?size=338&ext=jpg"; function fav(elemId){ $("#elemId").find(".favorite").attr("src", newURL) } // your ajax call $.ajax({ url: "", data: { /*Your parameters*/}, success: function(returnedData){ fav(returnedData); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="product-tile-top"> <div class="product-tile-top-inner tile-wishlist"> <span role="button" class="wish-list-icon" id="grc398342"> <div class="btn btn-default btn-sm pdp-wishlist-btn"> <span> <img class="favorite" src="https://img.freepik.com/free-vector/yellow-star-trail-set_23-2147739091.jpg?size=338&ext=jpg" height="17px;"> </span> </div> </span> </div> </div> 

Answer 2

Onclick of the div invoke a function and push the id of the div. Using children get the span child and make changes

 function a(id) { var ele = document.getElementById(id).children[0].children[0]; ele.style.color = "red"; ele.children[0].setAttribute('url',"www.xyz.com") console.log(ele.children[0].getAttribute('url')) } 

 <div class="product-tile-top"> <div class="product-tile-top-inner tile-wishlist"> <span role="button" class="wish-list-icon" id="grc398342" onclick=a(this.id)> <div class="btn btn-default btn-sm pdp-wishlist-btn"> <span>dd <img class="favorite" src="/_ui/responsive/common/images/favorite.svg" height="17px;"> </span> </div> </span> </div> </div>