Uncaught ReferenceError: Function is not defined using external js file

Question

I have a table of rows with contact details and a call button in every row, which when clicked should call the customer.

I am using onclick on call the function defined in external js file (I know not the best practice and potentially due to outside scope, but I am passing the phone number as well)

I am getting error Uncaught Referenceerror: function is not defined

https://jsfiddle.net/e1z25y3w/3/

<table>
<th>
  <td>#</td>
  <td>Name</td>
  <td>City</td>
  <td>Phone Number</td>
  <td>Call</td>
</th>
<tr>
  <td>1</td>
  <td>John</td>
  <td>Melbourne</td>
  <td>+61123456789</td>
  <td><a role="button" onclick="callPhone('+61123456789')">Call</a></td>
</tr>
<tr>
  <td>2</td>
  <td>Tanya</td>
  <td>Sydney</td>
  <td>+61987654321</td>
  <td><a role="button" onclick="callPhone('+61987654321')">Call</a></td>
</tr>

</table>

Jquery 3.4.1 included at the bottom of the page javascript file also included after jquery

$(function () {
  //const phoneNumberInput = document.getElementById("phone-number");

function callPhone(phonenumber) {
alert(here);
      log("calling phone number " + phonenumber.value);
      //e.preventDefault();
      phoneNumberInput = phonenumber;
      makeOutgoingCall();
  }
});

What is the best way to execute this?

Answer 1

because the "callPhone" function isn't in the global scope, so when you to try call it, will give "callPhone is not defined".

1- first solution is to write it on the global scope.

function callPhone(phonenumber) {
  console.log('running')
}

https://jsfiddle.net/mena234/rakeopg2/9

2- The second solution is to store it in a global variable.

let referanceStore = null
$(function () {
//const phoneNumberInput = document.getElementById("phone-number");

function callPhone(phonenumber) {
  // any code here...
  console.log('running')
}
referanceStore = callPhone

});

and use referancecStore to call your function ex:

referanceStore('+61987654321')

https://jsfiddle.net/mena234/z391euhm/7

3- Third solution is to use the javascript click event and dataset instead.

https://jsfiddle.net/mena234/z391euhm/22/

Answer 2

That is one of the reasons why you shouldn't use an inline event handler ( onclick="callPhone('+61123456789')" )

Your inline event handler can't find the function callPhone(phonenumber) because it is defined within the anonymous callback function passed to your $( ... ) so it is only visible in it.

So the first idea of how to solve it would be to make the callPhone globally visible. This however is a bad idea as it pollutes the global namespace.

You instead should get rid of your inline event handlers and attach the event handler within the scope where callPhone is defined, using eg event delegation and data attributes:

 $(function() { function callPhone(phonenumber) { console.log("calling phone number " + phonenumber); } // use event delegation to listen a click on elements with the data-action attribute beeing callPhone $(document).on('click', '[data-action="callPhone"]', function(evt) { // get the contents of the data attribute phone-number // and pass it to the callPhone function callPhone($(evt.target).data().phoneNumber) }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>#</td> <td>Name</td> <td>City</td> <td>Phone Number</td> <td>Call</td> </tr> <tr> <td>1</td> <td>John</td> <td>Melbourne</td> <td>+61123456789</td> <td><a role="button" data-phone-number="+61123456789" data-action="callPhone">Call</a></td> </tr> <tr> <td>2</td> <td>Tanya</td> <td>Sydney</td> <td>+61987654321</td> <td><a role="button" data-phone-number="+61987654321" data-action="callPhone">Call</a></td> </tr> </table>