未捕获的 ReferenceError：getProduct 未在 HTMLButtonElement.onclick 中定义

Question

I am building an E-commerce website.

My problem is that when a customer clicks on a product, how do I save all the data of that product (id, name, price) in a javascript object and then send the array of select product objects to a PHP file using Ajax?

this is my current implementation:

  <?php 
while($row=mysqli_fetch_assoc($product))
{
    $id=$row['id'];
    $name=$row['name'];
    $price=$row['price'];
?>
<div class="product" onclick="getProduct(this)">
    <p data-pid="<?php echo $id ?>" ><?php echo $id ?></p>
    <p data-pname="<?php echo $name ?>"><?php echo $name ?></p>
    <div class="product-footer">
        <p data-pprice="<?php echo $price ?>"><?php echo $price ?></p>
        <button>Add To Cart</button>
    </div>
</div>
<?php
}
?>

JS Code:

var products = new Array();
var product= new Object();
function getProduct(obj) {
     product.id = $(obj+' [data-pid]').data('pid');
     product.name= $(obj+' [data-pname]').data('pname');
     product.price= $(obj+' [data-pprice]').data('price');
     products.push(product);
     console.log(products);
}

this implementation is not working I get this javsscript error

Uncaught ReferenceError: getProduct is not defined at HTMLButtonElement.onclick

Answer 1

just do this

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> //Jquery Plugin

     <?php 
        while($row=mysqli_fetch_assoc($product)){echo '
        <div class="product" data-id="'.$row['id'].'" data-name="'.$row['name'].'" data-price="'.$row['price'].'">
            <p>'.$row['id'].'</p>
            <p>'.$row['name'].'</p>
            <div class="product-footer"><p>'.$row['price'].'</p><button>Add To Cart</button></div>
        </div>';
        }
    ?>
    <script>
    $('.product').click(function(e) {
        product = {'id':$(this).data('id'),'name':$(this).data('name'),'price':$(this).data('price')};
        console.log(product);
    });
    </script>