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

Question

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.

yeah kinda tried rn, but every "this" performs well, I don't get how I can call card[i] from inside the getComputedStyle. — Pepe, Aug 02 '19 at 14:10
cool, now to your problem, instead of givin a string to the getComputedStyle, give the function a element. Something like `getComputedStyle(document.getElementById("cartaSbagliata"))`. Or even the `this` — Mauricio Sipmann, Aug 02 '19 at 14:17
If you could [edit] your question, and the snippet within, to add the HTML on which the code runs, a [mcve], that would help us tremendously in helping to figure out what's going on. — Heretic Monkey, Aug 02 '19 at 14:26
your edit changes the question completely. this should be two questions and the previous error should be rolled back. you've invalidated @RotoRa's answer — rlemon, Aug 02 '19 at 14:43
I edited the question but I totally understood what was going on with the getComputedStyle, now I have another error but at least I'm not stuck anymore! — Pepe, Aug 02 '19 at 14:44
yeah i know, but I don't need help anymore, just updating y'all and clearing heretic monkey's mind! thanks to everyone — Pepe, Aug 02 '19 at 14:46
that's not how the site works. you should revert the question back to where the answer makes sense. mark the answer as correct, that's how users will know. if you wanted to add additional details to the question, that's fine, but changing it completely after getting your answer is not. — rlemon, Aug 02 '19 at 14:59

score 1 · Accepted Answer · answered Aug 02 '19 at 14:29

1

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)

answered Aug 02 '19 at 14:29

RoToRa

37,635
12
69
105

Thank you! this cleared my mind about this problem, now I'm getting an "Cannot set property 'opacity' of undefined" but It's a step forward, I don't feel stuck anymore (I guess ahahah) – Pepe Aug 02 '19 at 14:43

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

1 Answers1