sei-ec-remote / project-1-issues

Open new issues here
1 stars 2 forks source link

when Visibility is changed in JS = undefined #241

Closed Clund1 closed 9 months ago

Clund1 commented 9 months ago

What's the problem you're trying to solve?

Its giving an error on initialization where the visibility of the div contents should be disappearing after 5 seconds. The visibility is declared in the CSS but its unable to be changed by the JS?

Post any code you think might be relevant (one fenced block per file)

stated visibility in CSS

.goblin{
    border: .2vmin solid brown;
    border-radius: .75vmin;
    visibility: visible;
}
    forest.generateHidingSpots() //This generates random spawn of goblins on forest
    goblinEl.forEach((tile) =>{
            id = tile.id;
            tileArrPosition = forest.goblins[parseInt(id[1])][parseInt(id[3])]; // takes ID of each goblin space to formulate reference
            console.log(tileArrPosition);
            tile.style.backgroundColor = FORESTLOOKUP[tileArrPosition]; //uses FORESTLOOKUP to ref. background color/url choice
    })
setTimeout(hide,5000); //5 seconds to memorize then hide
}

//HIDES CHOICES
function hide(){
    goblinEl.style.visibility = "hidden";
}

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

Screenshot 2023-12-05 at 3 43 14 PM

What is your best guess as to the source of the problem?

Something is overwriting something or visibility isnt declared correctly?

What things have you already tried to solve the problem?

looked it up on MDN and W3, tried using display:"none" but that removes the outline(which I don't want)

Paste a link to your repository here

https://github.com/Clund1/Project-1---GAME

timmshinbone commented 9 months ago

Console log the goblinEl and show me what that is here

Clund1 commented 9 months ago
Screenshot 2023-12-05 at 4 17 00 PM
timmshinbone commented 9 months ago

ok! That's why it's saying goblinEl.style is undefined, because goblinEl is ACTUALLY goblinEls, a nodeList with multiple elements, who all have their own individual styles. You can target specific ones to change their style using array syntax(goblinEl[2].style for example)

timmshinbone commented 9 months ago

which means goblinEl should be named goblinEls, with the s indicating plurality

Clund1 commented 9 months ago

refactored for plurality and I'm still getting the same error as above on the same line

goblinEls logs the same as well