So I have a very simple JS function written that works like the following.

There is a button that has the following code:

<button type="submit" class="large button" onclick="addCart(76,95,73,96);">
    <i class="icon-shopping-cart"></i> Add to Cart
</button>

Now when that is clicked there is a very simple function added to the page below that looks like the following:

<script type="text/javascript">
    function addCart(pid, pattr, pval, pscent = 0) {
    ...
    }
</script>

This works perfectly in Chrome, Firefox, Chrome for Mobile, Safari for Mobile.

But this does not seem to work on Safari on Mac. Instead I get the following error:

ReferenceError: Can't find variable: addCart

I cannot figure out why. It's hard for me to add a listener because there are 7 buttons and a wide arrange of variables that are being sent, and I'd rather send that like I'm currently doing.

So I have a very simple JS function written that works like the following.

There is a button that has the following code:

<button type="submit" class="large button" onclick="addCart(76,95,73,96);">
    <i class="icon-shopping-cart"></i> Add to Cart
</button>

Now when that is clicked there is a very simple function added to the page below that looks like the following:

<script type="text/javascript">
    function addCart(pid, pattr, pval, pscent = 0) {
    ...
    }
</script>

This works perfectly in Chrome, Firefox, Chrome for Mobile, Safari for Mobile.

But this does not seem to work on Safari on Mac. Instead I get the following error:

ReferenceError: Can't find variable: addCart

I cannot figure out why. It's hard for me to add a listener because there are 7 buttons and a wide arrange of variables that are being sent, and I'd rather send that like I'm currently doing.

• javascript
• safari

• do you get that error when you click the button or when the page loads? – James Commented Jul 5, 2017 at 17:23
• The script tag is in the body, and it doesn't matter if it's first, or last, again works every browser except Safari. And I get this error only when the button is clicked. – Jason Diehl Commented Jul 5, 2017 at 17:28

3 Answers 3

I finally found the issue.

The function was creating an error in Safari so it was never being defined. I changed the function to the following:

function addCart(pid, pattr, pval, pscent) {
    pscent = (typeof pscent !== 'undefined') ?  pscent : 0;
...
}

Notice the big difference is that I was no longer using the Function to declare a default value for 'pscent' and instead I do it the old school method. Not sure if this is being caused by an older version of Safari or what.

If you are here because of a similar error, look for some potential JS error in the function which will prevent the function from being declared.

Looks like you are submitting a form since the input type is "submit". Have you tried testing it with the input type set to "button"?

if you are using jquery try to use document ready function

$(document).ready(function() { 
// code here
});

or use plain javascript self executing function here

(function() {
   // your page initialization code here
   // the DOM will be available here

})();

the possible reason is your function is not available at the time of click

Here is a sample (using jquery) https://jsfiddle/baphmoLt/