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" />