Trying to Make A Basic Loading Page

Question

Here's what I have so far...

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="main.css"/>
    <title>Tommay's Super Secret Database</title>
</head>
<body>
    <p id="q">Establishing connection</p>
    <p id="w">Checking the time</p>
    <p id="e">Doing other stuff</p>
    <p id="r">Locating cows</p>

    <script type="text/javascript">
        var q = document.getElementById("q");
        var qdisplay = q.style.display;

        window.onload = active();

        function active() {
            if (qdisplay == "block") {
                window.alert("IT WORKS!!");
            }
        }
    </script>
</body>
</html>

CSS:

body {
    background: #c33f3f;
}

#q {
    font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
    margin-top: 300px;
    color: white;
    margin-left: 20px;
    dsplay: block;
}

Basically, what I'm planning is to cycle through the q, w, e, and r paragraphs after a certain amount of time. I'll do this by using the active function to see which one's currently being displayed. Depending on which one's display is set to block, it'll run a separate function, which will go through three different .innerHTML things, each one adding another period at the end of the scentence. This will create a kind of animated ... thing.

This may not make any sense at all... For example, with Establishing connection, it would run through - Establishing connection - to - Establishing connection. - then - Establishing connection.. - and lastly - Establishing connection... - and then it would start at the beginning again. And it would do that a couple times, until it sets its display to "none," sets the display of w to "block," and then calls the active() function.

NOW, on to the actual problem. I ran this, and... nothing happened. the alert never popped up or anything. I originally thought it was because the active() function wasn't running, so I added the window.onload thing, but it still didn't work. WHICH leads me to believe I'm doing something wrong with detecting if the style of q is block. How does one go about doing that?

By the way, I know this doesn't ACTUALLY show the progress of loading. I'm just screwing around with JavaScript.

YES, I saw that other question, and it didn't work. Here's how I implemented it - I may have made a mistake?

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="main.css"/>
    <title>Loading...</title>
</head>
<body>
    <p id="q">Establishing connection...</p>

    <script type="text/javascript">
        var q = document.getElementById("q");
        var qdisplay = window.getComputedStyle("display");

        window.onload = active();

        function active() {
            if (qdisplay == "block") {
                window.alert("IT WORKS!!");
            }
        }
    </script>
</body>
</html>

I also tried using q.getComputedStyle, with the same results. Help?

possible duplicate of [Get a CSS value with JavaScript](http://stackoverflow.com/questions/6338217/get-a-css-value-with-javascript) — JJJ, Apr 04 '15 at 15:22
Also note that `window.onload = active();` doesn't do what you think it does; it should be `window.onload = active;`. Also, `var qdisplay = q.style.display;` (or actually the part that calculates the style as per the duplicate) should be inside the `active()` function, otherwise running the function on window load doesn't actually help anything. — JJJ, Apr 04 '15 at 15:24
Why would `window.getComputedStyle("display")` get the computed style of the `q` element? — JJJ, Apr 04 '15 at 16:20

score 2 · Accepted Answer · answered Apr 04 '15 at 16:15

I went in a different direction in solving this.

I suggest using only one element and filling and emptying it with javascript.

HTML:

<html>
<head>
    <title>Tommay's Super Secret Database</title>
</head>
<body>
    <p id="loader"></p>
</body>
</html>

I left your CSS alone, only difference is that I changed the selector #q to #loader.

Now for the JS:

function changeMsg (id, msg, i) {
  var elem = document.getElementById(id);
  var str = msg[i];
  while (elem.hasChildNodes()) {
    elem.removeChild(elem.firstChild);
  }
  if(msg[i]+1) {
    elem.innerHTML = str;
    window.setTimeout(changeMsg, 1000, id, msg, i+1);
    return;
  }
}

var msg = ['Establishing connection', 'Checking the time', 'Doing other stuff', 'Locating cows'];

changeMsg('loader', msg, 0);

Let me break down what I did.

The function changeMsg receives three parameters: id, msg and i.

id is the id of the element we will change (in this case it will be loader)
msg is an array of all messages we will display
i is the index we will use to decide which element of msg to display

The tricky part is at the end:

  if(msg[i]+1) {
    elem.innerHTML = str;
    window.setTimeout(changeMsg, 1000, id, msg, i+1);
    return;
  }

Here we check if there is a next message (we don't want undefined to be displayed after we ran through msg), then set a timeout to call our function with the same parameters, but an index that is higher.

When all is done we call the function with 0 as i and let it run it's course:

changeMsg('loader', msg, 0);

Check out my solution on jsbin.

OddDev · Answer 2 · 2015-04-04T15:34:29.940

What I've done here is actually adding a style to your element (you didn't had one). Also I've corrected a typo in your CSS. You've written "dsplay" instead of "display".

However, this should work:

var q = document.getElementById("q");
var qdisplay = q.style.display;

window.onload = active();
function active() {
  if (qdisplay == "block") {
    window.alert("IT WORKS!!");
  }
}

body {
  background: #c33f3f;
}

#q {
  font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
  margin-top: 300px;
  color: white;
  margin-left: 20px;
  display: block;
}

  <p id="q" style="display: block">Establishing connection</p>
  <p id="w">Checking the time</p>
  <p id="e">Doing other stuff</p>
  <p id="r">Locating cows</p>

This is the cleaned up version:

var ps = document.getElementsByTagName("p");
for(var i = 0; i < ps.length; i++){
  if(ps[i].className === "active"){
    alert(ps[i] + " " + i + " is active");
  }
}

body {
  background: #c33f3f;
}

p {
  font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
}

.active{
  margin-top: 300px;
  color: white;
  margin-left: 20px;
}

<p class="active">Establishing connection</p>
<p>Checking the time</p>
<p>Doing other stuff</p>
<p>Locating cows</p>

Trying to Make A Basic Loading Page

2 Answers2