I have been encountering an issue where the .cssText is not updating the HTML element referred to as .unveil. I implemented an event that when the container for .unveil is clicked, the .unveil element should become visible. However, upon clicking the .unveil element, it should hide itself. Despite this setup, whenever I run the program, I am informed that the values are not being overridden.
Here is the function; there are no error messages shown:
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);
}
}After clicking on the container for .unveil, the size changes due to the inline CSS modifications. However, when the .unveil element is clicked, nothing happens...
<div class="unveil" style="display: block; height: 95vh; width: 95vw;">
<p>test!</p>
</div>Once the .unveil element displays on the screen and I try to click on it, the height and width do not change despite having a "click" event listener installed. I even attempted using .style.height and .style.width with no success. My query now is why isn't .cssText functioning properly as expected?