javascriptthisfadegetcomputedstyle

JavaScript Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'

I'm trying to make a little square disappear when clicked but only if it's the wrong choice.

The problem is that I want it to fade away slowly and I have some issue selecting the square.

for (var i = 0; i < difficulty; i++) {
  card[i].addEventListener("click", function(){
    if(this.classList.contains("rightGuess")){
      victoryPar.innerHTML = "You're right!"
    }
    else{
      victoryPar.innerHTML = "Try again"
      this.classList.add("wrong");
      var cartaSbagliata = document.getElementsByClassName("wrong")[incremento];
      opacityWrong = Number(window.getComputedStyle("cartaSbagliata").getPropertyValue("opacity"));
      incremento++;
      interId = setInterval(function(){
        if(opacityWrong > 0){
          opacityWrong = opacityWrong-0.1;
          cartaSbagliata.style.opacity = opacityWrong
        }
        else{
          clearInterval(interID);
        }
      }, 40)

    }
  })
}

I just don't know how to select the card[i] in the getComputedStyle. It's a little mess because I tried almost everything, so it would be amazing if someone could explain to me how to properly select the item for getComputedStyle.

I'm a beginner so please explain, or I'm not gonna understand anything.

Solution

  • As the error says

    parameter 1 is not of type 'Element'

    "cartaSbagliata" is a string, not an element.

    You have the an element in the variable cartaSbagliata, so use it:

    window.getComputedStyle(cartaSbagliata)