What does each one say to do?
classList.remove("hide");
classList.add("hide");
What does each one say to do?
classList.remove("hide");
classList.add("hide");
If you havenāt visited the MDN site yet, you should check it out. It can not only answer basic questions, but often there is example code and browser support information.
add hide
remove hide
whatās the difference?
Would I be removing hide here, or adding?
playButton.querySelector(".play").classList.remove("hide");
playButton.querySelector(".pause").classList.add("inline-block");
Sorry, but are you saying you honestly donāt know the difference between add and remove?
the hide portion of it.
What do you think āhideā is? What kind of attribute?
I was told to
Replace:
.style.display
With:
.classList.add/remove.
Before it looked like this:
document.querySelector(".play1").style.display = "none";
document.querySelector(".pause1").style.display = "inline-block";
Should I have put none there instead?
You were asking about these two lines; Iām not at all sure why youāve gone back to a different piece of code and started asking about ānoneā.
If you had the following HTML
<div class="hide">...</div>
and applied classList.remove("hide");
to it, what do you think might happen?
If you had the following HTML
<div class="other">...</div>
and applied classList.add("hide");
to it, again, what do you think might happen?
Like this I think.
playButton.querySelector(".play").classList.add("hide");
playButton.querySelector(".pause").classList.remove("hide");
player.play();
} else {
playButton.querySelector(".play").classList.remove("hide");
playButton.querySelector(".pause").classList.add("hide");
player.pause();
When you set the display to none, you are intending to hide the element. Therefore, you want to instead add the hide class to that element.
When setting the display to inline-block, you are wanTing to show the element, which is achieved by removing that hide class from the element.
No, donāt post code, especially not JavaScript code.
Iām asking you to describe in plain English, what you think will happen to the HTML Iāve given you, when those particular JavaScript statement are applied to them.
Shows
.classList.remove("hide");
Hides
.classList.add("hide");
Not exactly the explanation I was hoping for, as again youāve posted the JavaScript code, and have not described its effect on the HTML.
In short then, .remove("hide")
will look at the element it has been targeted at, and if it finds the class hide
, it will remove it from the classlist, so this
<div class="hide">...</div>
becomes this
<div class="">...</div>
In the case of .add("hide")
, this
<div class="other">...</div>
becomes this
<div class="other hide">...</div>
Can you see whatās happening there?
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.