Variable error is not defined


I have a form and when I run the event onclick gives error, it says that the variable is not defined.

This is the button:

document.getElementById("btnSend").addEventListener("click", function myFunction() {
    var first_name=document.getElementById("first_name").value.toUpperCase();
    var last_name=document.getElementById("last_name").value.toUpperCase();
    var cedula=document.getElementById("cedula").value.toUpperCase();
    var ve=document.getElementById("ve").value;
    var codigo=document.getElementById("codigo").value;
    var phone=document.getElementById("phone").value;
    var email=document.getElementById("email").value.toLowerCase();
    var descripcion=document.getElementById("descripcion").value.toUpperCase();
    if(first_name == null || first_name.length == 0 || /^\s+$/.test(first_name)){
        swal("ERROR:", "El campo Nombre no debe ir vacío!");
        return false;

    if(cedula == null || cedula.length == 0 || isNaN(cedula)){
        swal("ERROR:", "Debes ingresar su número de cedula");
        return false;

    if(codigo == null || codigo.length == 0 || isNaN(codigo)){
        swal("ERROR:", "Debes ingresar el codigo del telefono");
        return false;

    if(phone == null || phone.length == 0 || isNaN(phone)){
        swal("ERROR:", "Debes ingresar su número de telefono");
        return false;

    if(descripcion == null || descripcion.length == 0 || /^\s+$/.test(descripcion)){
      swal("ERROR:", "Debes ingresar un Asunto");
      return false;
    var data = JSON.stringify({
      "client_data": {
        "id_doc": ""+ve+""+cedula+"",
        "first_name": ""+first_name+"",
        "last_name": ""+last_name+"",
        "email": ""+email+"",
        "phone": ""+codigo+""+phone+"",
      "title": "PROSPECTO DE ALIADO",
      "type": "REQUEST",
      "weight": 1,
      "channel": "WEB",
      "description_markdown": ""+descripcion+"",
      "time_estimate": 2400,
      "business_id": "3606bce0-0d0c-11e8-bf0a-6b5a224d7afd"
    var xhr = new XMLHttpRequest();
    xhr.withCredentials = true;
    xhr.addEventListener("readystatechange", function () {
      if (xhr.readyState === 4) {
        var myObj = JSON.parse(this.responseText);
          title: "¿Estás seguro?",
          text: "Deseas enviar la solicitud ?",
          icon: "warning",
          buttons: true,
          dangerMode: true,
        .then((willDelete) => {

          if (willDelete) {
            swal("Solicitud enviada!", {
              icon: "success",
              text:" Su número de Ticket es : " +myObj.number,
              title: "Enviado Exitosamente!",


    });"POST", "");
    xhr.setRequestHeader("Content-Type", "application/json");
    <input type="submit" class="btn btn-default" value="Enviar" id="btnSend" onclick="myFunction();limpiarFormulario()"> </input></i>

asked by Daniel Martinez 30.10.2018 в 15:47

3 answers


The problem you have, is where the function myFunction is located. I'll post an example below:

function myListener(){
  function myFunction(){
      return "chispas";
    return myFunction;



in the following example myListener is returning a function within a function this is known as Closure , is similar to what is happening to you, the function myFunction is inside the AddEventListener, a very common case when you use it and you do not realize it is in $().ready({.....}) of JQuery

For your example you can do it in two ways.

  • Remove the onclick, since you already have the addEventListener and it's the same

  • Delete the AddEventListener and define your function in your JavaScript file

  • answered by 30.10.2018 / 17:18

    In HTML you have a onclick attribute that refers to a function that does not exist in that context ( myFunction ). It is a problem similar to this question

    answered by 30.10.2018 в 16:39

    the addEventListener function is defined like this


    document.addEventListener (event, function, useCapture)

    What you expect to receive this function as a second parameter is a function not a definition of a function :

    // Definicion de una funcion
    function myFunction() {
    // Uso de la funcion
    document.addEventListener('click', myFunction);
    // Lo que creo que querías hacer
    document.addEventListener('click', function(){

    now what you have is a definition of a function within the parameter that receives addEventListener

    document.getElementById("btnSend").addEventListener("click", function myFunction() {

    I hope you will notice the difference of how to do it well and how to do it wrong

    answered by 30.10.2018 в 18:47