0

Estoy intentando acceder a una Boleana iniciada en false en el constructor desde un evento, pero me la da undefined, como puedo hacer para poder usarla desde el evento.

Aqui el constructor

constructor(_view ){

    this._view = _view
    this._cards = []
    this.sectionBoard= this._view.getElementById('board');
    this.cardsNodeList = this._view.querySelectorAll('.card');
    this.hasFlipperCard= false;
    this.firstCard
    this.secondCard


}

y aqui es donde me gustaria acceder a this.hasFlipperCard:

StartEvent(){

    const cards = this._view.querySelectorAll('.card');
    this.cardsNodeList = cards


    this.cardsNodeList.forEach(card => card.addEventListener('click', this.flipCard ))
}

flipCard(){

    console.log(this)
     this.classList.toggle('flip');



    if(!this.hasFlipperCard){
        this.hasFlipperCard = true
        this.firstCard = this



    }else {
        this.hasFlipperCard= false;
        this.secondCard = this;



    this.match()
}

el valor de ese console.log(this) es la etiqueta html que selecciono(cosa que quiero)

2
  • cambia tu funcion por arrow function, te invito a leer esta respuesta que amplia lo que quiero decir y porque Commented el 6 may. 2019 a las 15:57
  • tu problema es de conocer un poco mas JavaScript, para conocer quien es this y en que instancia la estas ejecutando, puedes tener metodos en una clase que puedes enlazarlos a otra clase(es confuso JavaScript algunas oportunidades) para eso crearon las arrow function Commented el 6 may. 2019 a las 15:59

1 respuesta 1

0

this no es undefined en la linea donde pones console.log(this), a mi me pone que this es igual a una referencia de nuestra clase previamente creada, sin embargo tengo entendido que esto no es para nada lo que deseas, lo que deseas es que this sea igual al objeto que se esta clickeando en ese momento.

Por ahora pienso que tienes algo perdido el concepto de this en los contextos, daré una breve explicación:

this hace referencia al primer objeto, clase o función que encuentre que este delimitado por llaves ({}), ademas this debe estar dentro de esta para poder estar apuntando a esa clase, función u objeto, (OJO, siempre y cuando este sea un objeto de algún tipo), por lo tanto los condicionales y los ciclos no se incluyen (Ya que no son objetos, clases o funciones ni tampoco tienen un tipo definido).

También si estamos apuntando al contexto de una función, el contexto será esa misma función o por defecto el objeto o variable al que le estamos aplicando dicha función y aplica siempre y cuando la función no sea una función tipo flecha, (Ya que las funciones tipo flecha no tienen un contexto this de por sí), por lo que al momento de hacer console.log(this) en una función tipo flecha (el cual no es el caso en este ejemplo), daría como resultado que te imprime "undefined".

Habiendo dicho esto, me di cuenta que estas queriendo usar JQuery, un framework de javascript, yo supongo que tu en tu código original, ya importaste JQuery.

Es simple darse cuenta de esto al ver que intentaste usar la función toggle("flip") que es propia de este framework.

Sin embargo...

JQuery tiene sus propias referencias únicas a cada una de las variables del dom, y sus funciones solo funcionarán (Valga la redundancia), si usas sus referencias y no las normales o por defecto de javascript.

Ejemplos con los que no funcionarían funciones de JQuery son:

document.getElementById("Lo que sea");
document.getElementsByClassName("Lo que sea");
document.getElementsByTagName("Lo que sea");

Etc...

¿Y entonces como uso las referencias propias de JQuery?, simple:

/*Usa $("") y pon de primeras un punto (.) seguido de el nombre de la clase
para decirle a JQuery que vas a obtener todos los elementos de una clase 
con un nombre determinado, también en vez del punto puedes usar un # (Numeral)
para apuntar a un id en especifico

y si necesitas hacer algo parecido a lo que hace document.getElementsByTagName()
pues simplemente pones el nombre del elemento html.*/

class CardManager{
  
  constructor(_view){

    this._view = _view;
    this._cards = [];
    this.sectionBoard= $("#board");
    this.cardsNodeList = $(".card");
    this.hasFlipperCard= false;
    this.firstCard;
    this.secondCard;

  }
  
  StartEvent(){

    /*Vamos a tener dos contextos, uno que apunta nuestra clase (CardManager) (ourConstructor),
     *y otro que hace alusión a el objeto que se ha clickeado (Dentro de la función click),
     *($(this)), para no perder ninguno de los dos contextos y poder usarlos simultaneamente,
     *simplemente guardamos de antemano nuestra referencia a toda nuestra clase en ourConstructor*/
    let ourConstructor = this;
    
    /*Así se añade un evento Click en JQuery, como vez no se usa una función tipo flecha para
     *preservar el contexto de this, que en este caso hará alusión (Dentro de la función) a
     *nada mas ni nada menos que el elemento que fue clickeado.*/
    this.cardsNodeList.click(function(){
      
      /*Si ejecutas esto en otra parte y no en este snippet verás que tiene un valor "especial"
       *en vez del valor común que desplegaria si usaramos alguna función predeterminada de
       *javascript para obtener un elemento del DOM. Esto es cosa de JQuery pero es necesario.*/
      console.log($(this));
      ourConstructor.flipCard($(this));
      
    })
    
  }

  flipCard(theCard){
    
    theCard.toggle('flip');

    if(!this.hasFlipperCard){
      
        this.hasFlipperCard = true
        this.firstCard = theCard;

    }else {
      
        this.hasFlipperCard= false;
        this.secondCard = theCard;
        /*no se para que sirve match si es en JQuery pero en javascript puro es para buscar 
         *un string determinado en otro string, lo he quitado ya que no no entendi para que
         *lo requerias y para no tener errores a la hora de mostrar correctamente el snippet.*/
      
    }

  console.log(this.hasFlipperCard);
    
  }
  
}
  
let cardManager = new CardManager(document);
cardManager.StartEvent();
.card{

  display: inline-block;
  padding: 20px;
  background: green;
  margin-right: 10px;
  
}

.card:last-child{
  
  margin-right: 0px;
  
}
<html lang = "es">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset = "utf-8"></meta>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  </head>

  <body>
    
    <div id="board">
      
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      
    </div>
    
  </body>
</html>

3
  • Te agradezco muchísimo la respuesta pero, el valor de ese console.log(this) es la carta la que pincho, pero me gustaría también que una vez pinchada la carta obtener , this.hasFlipperCard= false, cosa que no puedo me lo encuentra undefined , entra en el if y le aplica el true correctamente, pero al pinchar otra carta no mantiene el valor true, si no que vuelve estar undefined por lo tanto no salgo del primer if porque siempre que pincho this.hasFlipperCard es undefined. Y no no estoy usando Jquery, toogle también se puede usar sin jquery; gracias de todas formas. Commented el 6 may. 2019 a las 13:26
  • Se ha editado una parte del snippet del ejemplo (Solo le añadi un console log del valor hasFlipperCard y le cambie los valores a firstCard y secondCard), como veras al ejecutar el código y clickear en algún boton me aparece que el valor de hasFlipperCard !== undefined
    – Layer
    Commented el 6 may. 2019 a las 15:56
  • Ah y le cambie el valor a las variables firstCard y secondCard
    – Layer
    Commented el 6 may. 2019 a las 16:18

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.