Plz help fix bug

Question

https://code.sololearn.com/WhKG1u51agzy/?ref=app

Answer 1

Josh Greig sorry my explanation wasn't that good.

I am wanting the introPage to appear while the loadingPage displays none. And after the setTimeout function, the content displays = block and everything else display none. I did all that but didn't work...

Thanks for your help

Answer 2

It isn't clear what bug you want fixed. I see no JavaScript error thrown and I don't see anything obviously broken when I visit that in Google Chrome on my laptop.

I see that clicking the Continue button navigates to a broken location. Is that the bug?

Give steps to reproduce the bug.

Describe the difference between what you want or expect to happen and what you're seeing.

Answer 3

Twin chick wrote, "Josh Greig sorry my explanation wasn't that good.

I am wanting the introPage to appear while the loadingPage displays none. And after the setTimeout function, the content displays = block and everything else display none. I did all that but didn't work...

Thanks for your help"

Response:

Ok. That clears things up a lot.

If you set display: none on an element, all of its children and descendent elements won't show either. Maybe you don't expect this but you're opening and closing tags are out of order which is causing your introPage element to be an ancestor of the elements you're trying to show.

Here are some improvements:
- consistently indent all your tags.
- Verify that your tags are balanced by copy/pasting your HTML as direct input at: https://validator.w3.org/nu/#textarea and running that validator.
You don't need to worry about using the center tag but get the tags in order.
- make sure loadingPage, is a sibling to introPage, container, content instead of containing them.

Replace your JavaScript with this:
$(document).ready(function(){
$(".toggle").click(function(){
$(".toggle").toggleClass("active")
$("body").toggleClass("night")
});
var continueBtn = document.getElementById("continueBtn")

continueBtn.addEventListener("click", function(){
var content = document.getElementById ("content")
var loadingPage = document.getElementById("loadingPage")
var introPage = document.getElementById("introPage")
var container = document.querySelector('.container');
introPage.style.display = "block"

loadingPage.style.display = "none"

content.style.display = "none"
container.style.display = "block"

setTimeout(function(){
container.style.display = "none"
introPage.style.display = "none"
loadingPage.style.display = "none"
content.style.display = "block"
}, 1500)
})
});

Answer 4

Josh Greig https://code.sololearn.com/WhKG1u51agzy/?ref=app...

Answer 5

Thank you that helped a lot

But I can't make the progress bar animation and also the continue button disappear when continue button clicked. https://code.sololearn.com/WhKG1u51agzy/?ref=app

Answer 6

Josh Greig and I think the positions are a bit messy can plz help fix it will be well appreciated!!!!!😃😁😊

Answer 7

Josh Greig I want everything to disappear when clicked continue expect the code studios animation stays and setInterval 7500 ms and then everything else disappears expect the content

Answer 8

Josh Greig you have been VERY helpful thanks

Answer 9

Josh Greig still no difference... Plz help me thanks

Answer 10

I balanced the tags here: https://ctxt.io/2/AACgrT6FEQ

Copy/paste that HTML soon. It'll expire in 1 day on that site.

I would have put that code here but sololearn doesn't allow more than 2000 characters and has some bug preventing me from sharing it all.

Answer 11

What do you want with the progress bar animation? You already have the progress bar moving before the continue button appears. Do you want the same animation after clicking Continue?

These little changes that are subjective will be much faster for you to do than us going back and forth on it.