Onclick cannot find function to execute

Question

I am using an onclick() function to add an item to cart.

<button class='btn pull-right' id = 'cartBtn' onclick = 'addToCart(<?php echo $id;?>)'><span class='glyphicon glyphicon-shopping-cart'></span></button>

This is the js:

$(document).ready(function(){
    var cart = [];
    var id = $("#itemId").text();
    var stockAvailable = $("itemStock").text();
    var inCart = false;


    function addToCart(item){
        id = item;
            if (inCart == true){
                console.log("item already in cart");
            }
            else{
                cart.push(id);

            }

    }

However, I get the following error in the console upon clicking the button:

ReferenceError: addToCart is not defined

I have written the js code on a separate file and inluded it in the head section. What could be the problem here

Just write function outside "$(document).ready" because function doesn't need to wait until jquery gets initialised. — Ankur
– Ankur, Commented Jul 9, 2019 at 4:29
@RAVIPATEL no. The only problem is that the onclick() function cannot seem to find the addToCart() function. — Vic
– Vic, Commented Jul 9, 2019 at 4:38

shrys · Accepted Answer · 2019-07-09 07:56:10Z

2

You cannot use addToCart without defining it. You can define it in the place where you want to use this function.

$(document).ready(function() {
  function addToCart(item) {
    console.log('added');
  }
});
addToCart('item');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Right way

function addToCart(item) {
  console.log('added');
}
$(document).ready(function() {

});
addToCart('item');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

edited Jul 9, 2019 at 7:56

shrys

5,9682 gold badges26 silver badges38 bronze badges

answered Jul 9, 2019 at 4:30

Jwngsat Narzary

211 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Vic Over a year ago

I have defined it in an external script.

kcsujeet · Accepted Answer · 2019-07-09 04:40:45Z

1

from the official jquery docs. https://learn.jquery.com/using-jquery-core/document-ready/

TLDR: document.ready runs only once so define your function outside of it.

answered Jul 9, 2019 at 4:40

kcsujeet

5512 silver badges12 bronze badges

Comments

Ankur · Accepted Answer · 2019-07-09 04:39:47Z

1

Here i am showing you very basic example code based on your question

var id, cart = [], stockAvailable, inCart = false;
$(document).ready(function(){
  id = $("#itemId").text();
  stockAvailable = $("itemStock").text();
});

function addToCart(item){
  id = item;
  if (inCart == true){
      console.log("item already in cart");
  }
  else{
      cart.push(id);
      inCart = true;
      console.log("item added in cart");
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='btn pull-right' id = 'cartBtn' onclick = 'addToCart(1)'><span class='glyphicon glyphicon-shopping-cart'></span> Add to Cart</button>

edited Jul 9, 2019 at 4:39

answered Jul 9, 2019 at 4:33

Ankur

5161 gold badge6 silver badges11 bronze badges

Comments

Shivaji Kokate · Accepted Answer · 2019-07-09 05:36:28Z

0

Anyways you are using Jquery, so can you please check with jquery event handler.

Please find the answer using jquery click event.

$("#cartBtn").on("click", function(item){
       id = item;
            if (inCart == true){
                console.log("item already in cart");
            }
            else{
                cart.push(id);

            }
        }
   })

answered Jul 9, 2019 at 5:36

Shivaji Kokate

371 silver badge7 bronze badges

Collectives™ on Stack Overflow

Onclick cannot find function to execute

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related