1

Lo que quiero lograr es que si el mensaje tiene igual o mas de 15 caracteres me mostraria this.c como true osino como false, pero me muestra undefined.. por que?

function A() {
  
  this.mp = function(msg) {
    
    this.c = msg.length >= 15 ? true : false;
    
    return this.c;
    
  };
  
 var to = (function() {
   
   window.addEventListener("load", function(){
     
     document.getElementById("b").addEventListener("click", function(){
       
       this.mp(document.getElementById("a").value.toString());
       console.log(this.c);
  
     });
     
   });
   
   
 }).bind(this)();
  
  
}

document.getElementById("b").addEventListener("click", function(){
  
  nw = new A();
  
  console.log(this.mp);
  
  
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<input type="text" id="a" placeholder="Mensaje"/>
<input type="button" id="b" value="Enviar mensaje"/>
</body>
</html>

1 respuesta 1

3

El problema es que this no es lo que crees que es aquí:

document.getElementById("b").addEventListener("click", function(){
  nw = new A();
  console.log(this.mp);
});

estás asociando un controlador del evento click al botón b. Y dentro de ese controlador, creas un nuevo A() y se lo asignas a nw. Luego haces this.mp... Pero this en ese contexto es el botón b, que no contiene ningún método mp; por eso recibes undefined. Es nw el que contiene el método, por lo que deberías hacer nw.mp(). Pero aún hay más. mp toma un parámetro con la cadena y no le estarías pasando nada. Tienes que pasarle la cadena con el valor del campo de texto a.

Cambiando esas dos cosas, ya funcionaría:

document.getElementById("b").addEventListener("click", function() {
  nw = new A();
  console.log(nw.mp(document.getElementById("a").value));
});

Como puedes ver en esta demo:

function A() {

  this.mp = function(msg) {
    this.c = msg.length >= 15 ? true : false;
    return this.c;
  };

  var to = (function() {
    window.addEventListener("load", function() {
      document.getElementById("b").addEventListener("click", function() {
        this.mp(document.getElementById("a").value.toString());
        console.log(this.c);
      });
    });
  }).bind(this)();

}

document.getElementById("b").addEventListener("click", function() {
  nw = new A();
  console.log(nw.mp(document.getElementById("a").value));
});
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <input type="text" id="a" placeholder="Mensaje" />
  <input type="button" id="b" value="Enviar mensaje" />
</body>

</html>


En los comentarios, dices que por qué no funciona incluso cuando está puesto de manera similar en la función interna to. Voy a explicar en esta edición por qué ése es el caso y por qué es el comportamiento esperado (y también por qué no debería hacerse de ese modo).

Vamos a analizar el código:

var to = (function() {
   window.addEventListener("load", function(){
     document.getElementById("b").addEventListener("click", function(){ 
       this.mp(document.getElementById("a").value.toString());
       console.log(this.c);
     });
   });
 }).bind(this)();

Creas una función (que llamas automáticamente intentando cambiar el this con bind) que añade un controlador del evento load de la ventana en el que se pondrá un controlador del evento click al botón... y aquí está el primer problema.

La ventana ya se ha cargado antes de llamar a to (porque se llama cuando ya se haya pulsado en el botón, ver problema con esto más adelante). Entonces añadir un controlador del evento load al window no produce ningún resultado porque ese evento ya se disparó y no se va a volver a disparar. Vamos a eliminarlo:

var to = (function() {
   document.getElementById("b").addEventListener("click", function(){ 
     this.mp(document.getElementById("a").value.toString());
     console.log(this.c);
   });
 }).bind(this)();

Perfecto. Ahora con este código ya se dispara el controlador del click... aunque hay que pulsar una segunda vez para que se dispare el controlador que se acaba de asociar pero recibimos un error:

Uncaught TypeError: this.mp is not a function at HTMLInputElement.

¿Por qué ocurre eso? Por lo mismo que comentaba al principio de esta respuesta: this no es lo que crees que es. Aunque hayas cambiado el valor de this con bind, ahora estás dentro de la función del controlador del evento click y el this ha cambiado para ser el botón. Esto se podría solucionar cambiando el valor del this en el controlador llamando de nuevo a bind:

var to = (function() {
   document.getElementById("b").addEventListener("click", (function(){ 
     this.mp(document.getElementById("a").value.toString());
     console.log(this.c);
   }).bind(this));
 }).bind(this)();

¡Perfecto! Ya funciona... ¿o no? Ahora sí que por fin devuelve el valor correcto, pero hay un problema adicional - cada vez que pulso el botón se muestra el resultado una vez más: la primera vez se muestra una vez, la segunda vez se muestra dos veces, la tercera vez se muestra tres veces... y así.

¿Por qué ocurre eso? Ahora hay que mirar a otro culpable:

document.getElementById("b").addEventListener("click", function(){
  nw = new A();
  //console.log(this.mp);
});

Cada vez que se pulsa el botón, se llama a la función del controlador, se crea un A(), que llama a su to, que asocia un nuevo controlador al botón... así que cada vez que se pulsa el botón, se está asociando un nuevo controlador. Por eso ahora el resultado se muestra múltiples veces.

¿Cómo podría solucionar eso? Bueno, hay diferentes modos. Pero quizás lo mejor sería que no se asociase un controlador del evento click para el botón dentro de to. Así matarías dos pájaros de un tiro: no se repetirán las acciones múltiples veces y no hará falta pulsar dos veces el botón para ver el resultado.

Entonces el código de to quedaría así:

var to = (function() {
   this.mp(document.getElementById("a").value.toString());
   console.log(this.c);
 }).bind(this)();

Y el código final quedaría así:

function A() {

  this.mp = function(msg) {
    this.c = msg.length >= 15 ? true : false;
    return this.c;
  };

  var to = (function() {
    this.mp(document.getElementById("a").value.toString());
    console.log(this.c);
  }).bind(this)();
  
}

document.getElementById("b").addEventListener("click", function() {
  nw = new A();
});
<input type="text" id="a" placeholder="Mensaje" />
<input type="button" id="b" value="Enviar mensaje" />

11
  • Pero yo ya le pasaba el campo del valor a la funcion mp, se lo enviaba desde var to = function
    – ESCM
    Commented el 2 jul. 2017 a las 18:53
  • @EduardoSebastian Eso es la función to, ¿dónde se llama en el código?
    – Alvaro Montoro
    Commented el 2 jul. 2017 a las 19:34
  • this.mp(document.getElementById("a").value.toString());
    – ESCM
    Commented el 2 jul. 2017 a las 22:34
  • de hecho, si elimino la linea que yo tenia en la que le paso el valor, sigue funcionando? que?!!
    – ESCM
    Commented el 2 jul. 2017 a las 22:38
  • @EduardoSebastian ¿Qué línea estás eliminando? No me termina de quedar claro lo que dices. ¿Tu código funciona si eliminas qué línea?
    – Alvaro Montoro
    Commented el 2 jul. 2017 a las 22:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.