CODEWITHSUNDEEP
javascripthtmlcssweb
Peter Ekela
Peter Ekela

Reputation: 1

Javascript .cssText function not functioning

So my question is why is .cssText not changing the html element that's referred to as .unveil. I added the event when the container for .unveil is clicked, the .unveil element should be visible. And when the .unveil element is clicked, it should hide itself. But whenever I run the program, it's saying that the values are not being overridden

here is the function, and I am not getting an error message or anything like that,

function unveilAnswer(){
     // let's add the flip functionality for showing the answers
    var unveilNode=null;
    for (i=0; i<containerCards.length; i++)
        if (this===containerCards[i]) {//"this" in this case refers to the object that the event is being added to; it will be from the .container-card perspective
            unveilNode=this.querySelector(".unveil");
            this.addEventListener("click", e=>{
                unveilNode.style.cssText="display:block; height:95vh; width:95vw;";
            });
            unveilNode.addEventListener("click", (e)=>{
                unveilNode.style.cssText=" display:none; width:0px; height:0px;";
                showCards(); //for when it's time to click on another question; it will hide the current one
                console.log(unveilNode); // fpr testing purposes
            });
            hideCars(i);
        }
}

this is the result after clicking on the container for .unveil, the size changes as you can tell from the inline CSS, but when you click on the .unveil element, nothing happens...

<div class="unveil" style="display: block; height: 95vh; width: 95vw;"> 
    <p>test!</p>
</div>

after the .unveil element displays on screen and I click on it, the height and width remain unchanged even though I added a "click" event listener. I even tried using .style.height and .style.width and it was still unresponsive So my question is why is .cssText not working properly as it should?

Upvotes: 0

Views: 62

Answers (1)

Adam
Adam

Reputation: 5984

You've added an event listener twice and unless you use 'removeEventListener()' then both will fire. Use just one event listener for the click event and then based on what's in the style attribute, use that to determine what to change it to.

It's more common to set up a class (e.g. .hidemycard { display:none } then use something like unveilNode.classList.toggle('hidemycard') or similar which will show/hide the element on each click. EDIT: I've added an example to show you how to do this.

window.onload = (event) => {
  const card = document.getElementById('me');
  card.addEventListener('click', () => {
    document.getElementById('thingtoshow').classList.toggle('hideme');
  });
}
#me {
  cursor: pointer;
}

.hideme {
  display: none;
}
<div id='me' class='card'>Click me!</div>
<div id='thingtoshow' class='hideme'>This is some content!</div>

Upvotes: 1

Related Questions