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?

Your callPhone is in the scope of the doc.ready. Don't put functions in doc.ready, put DOM manipulation in doc.ready. — fdomn-m
– fdomn-m, Commented Jun 17, 2022 at 12:38
@freedomn-m Since there are more than one row, I am trying to get the element array using document.getElementsByClassName("button-call"); Then I need to find which row was clicked and then get the phone number for that row as well. Let me try — MoC
– MoC, Commented Jun 17, 2022 at 12:44

Mina · Accepted Answer · 2022-06-17 13:53:16Z

2

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/

edited Jun 17, 2022 at 13:53

answered Jun 17, 2022 at 12:33

Mina

17.8k3 gold badges24 silver badges39 bronze badges

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

8 Comments

MoC Over a year ago

So this html calls a javascript function that is defined in an external javascript file. I have many other functions in the external js file that other html pages will also call, so I can't bring all the functions to all file. Did you get a chance to look at jsfiddle file?

Mina Over a year ago

Yes, The issue of your code is the callPhone function is wrapped inside jquery $(function() {}), which doesn't make it in the global scope. jsfiddle.net/mena234/rakeopg2/9

Mina Over a year ago

The second solution is store the function to a variable in the global scope, so you can call it. jsfiddle.net/mena234/z391euhm/7

MoC Over a year ago

this is good, but when I take the callPhone function outside the $(function(){ }); , it works, but then I am not able to call other functions define inside. So, should I take all functions outside?

MoC Over a year ago

your second jsfiddle made some progress, however, I am getting this error Uncaught TypeError: Assignment to constant variable.

|

t.niese · Accepted Answer · 2022-06-17 14:07:51Z

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 e.g. 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>

Collectives™ on Stack Overflow

Uncaught ReferenceError: Function is not defined using external js file

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related