Tengo una tabla de filas con detalles de contacto y un botón de llamada en cada fila, que cuando se hace clic debe llamar al cliente.
Estoy usando onclick on call la función definida en el archivo js externo (no conozco la mejor práctica y posiblemente debido a un alcance externo, pero también estoy pasando el número de teléfono)
Recibo el error Error de referencia no detectada: la función no está definida
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 incluido en la parte inferior de la página El archivo javascript también se incluye después de jquery
$(function () { //const phoneNumberInput = document.getElementById("phone-number"); function callPhone(phonenumber) { alert(here); log("calling phone number " + phonenumber.value); //e.preventDefault(); phoneNumberInput = phonenumber; makeOutgoingCall(); } });¿Cuál es la mejor manera de ejecutar esto?
porque la función "callPhone" no está en el alcance global, por lo que cuando intente llamarla, aparecerá "callPhone no está definido".
1- la primera solución es escribirlo en el alcance global.
function callPhone(phonenumber) { console.log('running') }https://jsfiddle.net/mena234/rakeopg2/9
2- La segunda solución es almacenarlo en una variable global.
let referanceStore = null $(function () { //const phoneNumberInput = document.getElementById("phone-number"); function callPhone(phonenumber) { // any code here... console.log('running') } referanceStore = callPhone });y use referancecStore para llamar a su función, por ejemplo:
referanceStore('+61987654321')https://jsfiddle.net/mena234/z391euhm/7
3- La tercera solución es usar el evento de clic de javascript y el conjunto de datos en su lugar.
Esa es una de las razones por las que no debe usar un controlador de eventos en línea ( onclick="callPhone('+61123456789')" )
Su controlador de eventos en línea no puede encontrar la function callPhone(phonenumber) porque está definida dentro de la función de devolución de llamada anónima que se pasa a su $( ... ) por lo que solo es visible en ella.
Entonces, la primera idea de cómo resolverlo sería hacer que callPhone visible globalmente. Sin embargo, esto es una mala idea ya que contamina el espacio de nombres global.
En su lugar, debe deshacerse de sus controladores de eventos en línea y adjuntar el controlador de eventos dentro del alcance donde se define callPhone , usando, por ejemplo, delegación de eventos y atributos de datos:
$(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>