Variable error is not defined

Question

Variable error is not defined

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

1

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) {
        console.log(xhr.responseText);
        var myObj = JSON.parse(this.responseText);
    
        swal({
          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!",
            });
          } 
        });

      }

    });
    
    xhr.open("POST", "https://api.paguetodo.com/issue/issue?user_id=3606bce0-0d0c-11e8-bf0a-6b5a224d7afd");
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(data);
    $(":text").each(function(){ 
            $($(this)).val('');
    }); 
});

<i>
    <input type="submit" class="btn btn-default" value="Enviar" id="btnSend" onclick="myFunction();limpiarFormulario()"> </input></i>

<i>

javascript

asked by Daniel Martinez 30.10.2018 в 15:47

source

3 answers

1

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

0

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

Get Date / Time of the HTML or Php System Convert a JOIN to Laravel

score 1 · Accepted Answer

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;
  }

console.log(myListener())
console.log(myListener()())

console.log(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