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

javascript don't read src type always an error been shown up – Html

this is the part of javascript bugged

function addCartClicked (event) {
    var button = event.target;
    var shopProducts = button.parentElement;
    var title = shopProducts.getElementsByClassName("product-name")[0].innerText;
    var price = shopProducts.getElementsByClassName("price")[0].innerText;
    var productImg = shopProducts.getElementsByClassName("product-image")[0].src;

    console.log(title, price, productImg);
  }

and this is the HTML part

<section class="projects" id="section">
<center><h1 class="ourpr">OUR PRODUCTS:</h1></center>
<div class="content">
<li>
<div class="project-card">
<img src="C:UsersMSIDocumentsINFOex4 serie htmlTOPGcapolista.png" alt="" class="product-        image" style="width: 360px; height: 348px;">
<div class="project-info">
<strong class="project-title"> <a class="product-name">makrouna fil</a> <a class="price">10$    </a><a class="addcart" align="center">Add to Cart</a>  </strong> </div>
</div>
 </li>

an error always showd up :

Uncaught TypeError: Cannot read properties of undefined (reading ‘src’)

even when i put .innerText it’s still the same idk why

i tried to replace it with innerText still the same
and i tried to put it without "."

var productImg = shopProducts.getElementsByClassName("product-image")[0])

it just show the price and the name no image shown

Tags:

2

Answers


  1. 0

    Just remove the spaces from the img class from:

    <img src="C:UsersMSIDocumentsINFOex4 serie htmlTOPGcapolista.png" alt="" class="product-        image" style="width: 360px; height: 348px;">

    to

    <img src="C:UsersMSIDocumentsINFOex4 serie htmlTOPGcapolista.png" alt="" class="product-image" style="width: 360px; height: 348px;">


    function addCartClicked(event) {
    var button=event.target;
    var shopProducts=button.parentElement;
    var title=shopProducts.getElementsByClassName("product-name")[0].innerText;
    var price=shopProducts.getElementsByClassName("price")[0].innerText;
    var productImg=shopProducts.getElementsByClassName("product-image")[0].src;

    console.log(title, price, productImg);
}
document.getElementById('btn').onclick = addCartClicked;
    <section class="projects" id="section">
    <center>
        <h1 class="ourpr">OUR PRODUCTS:</h1>
    </center>
    <div class="content">
        <li>
            <div class="project-card">
                <img src="C:UsersMSIDocumentsINFOex4 serie htmlTOPGcapolista.png" alt="" class="product-image" style="width: 360px; height: 348px;">
                <div class="project-info">
                    <strong class="project-title"> <a class="product-name">makrouna fil</a> <a class="price">10$    </a><a class="addcart" align="center">Add to Cart</a>  </strong> </div>
            </div>
        </li>
    </div>
    <button id="btn">Click</button>
</section>
    Login or Signup to reply.
  2. 0

    Please try by removing the space of classname from <img> tag as class="product-image". Don’t add unwanted spaces, it’s not a good practice.

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

Back To Top
Search