JavaScript code blocking CSS

Question

When I insert this code into my file it seems to block my CSS from showing. I made a script to try and print text once the page has loaded which I am then going to use later to make a loaded bar. This is my code. All that happens is I get the text "Test" printed on my page.

<html>
<head>
    <link rel="stylesheet" type="text/css" href="custom.css">
    <script>
    function myFunction() {
    document.getElementById('index').innerHTML = "test";
    }
    </script>
</head>

<!-- Page Body -->
<body id="index" onload="myFunction()">
    <div class="header">
        <div id="headerbar"></div>
        <ul id="">
    </div>
</body>
</html>

With `innerHTML` you are deleting all `div`s inside `index`. — loveNoHate, Sep 14 '14 at 02:50
Currently, I think your code is completely replacing the contents of the body tag with the word "test" (which removes the header). I don't know what your CSS looks like, but it may be that you're just deleting everything in the page, not preventing CSS from showing up. — Michael0x2a, Sep 14 '14 at 02:50
you can use `+=` but this is bad practice apparently, as [it makes it re parse stuff again](http://stackoverflow.com/a/11515395/908879) -disclaimer: that is an answer to one of my questions — ajax333221, Sep 14 '14 at 06:18

score 4 · Answer 1 · answered Sep 14 '14 at 02:51

When you set the innerHTML of the index element, it completely replaces everything in the body. So you no longer have the DIV with the header class, and you no longer have the DIV with the headerbar ID. There's nothing for your CSS to refer to. It's as if you had written:

<body id="index">test</body>

score 1 · Answer 2 · answered Sep 14 '14 at 02:52

1

Well for one we have no way of knowing what your CSS does, but an issue I see is that when you are using innerHTML it overwrites existing HTML. As in everything inside the body tag is overwritten to just test text.

Caveat: My presumption is that you don't have styles on the body either.

answered Sep 14 '14 at 02:52

lucusp

175
1
2
9

Yes, you were correct. Is there a way to just write html code into the doccument? Once the doccument loads I would like to simply just add another css doccument. – Andrew Yunt Sep 14 '14 at 03:01
For 'test' purposes you could change your innerHTML reference to the header bar div. Also you can write HTML code I where you put 'test' etc. – lucusp Sep 14 '14 at 03:13

score 0 · Answer 3 · answered Sep 14 '14 at 02:50

0

What exactly is your CSS supposed to style when you set the innerHTML of your body element to "test" ? You're removing all other contained elements by doing this.

I guess what you wanted to do is add a text node like this:

document.body.appendChild(document.createTextNode("test"));

answered Sep 14 '14 at 02:50

LJᛃ

7,655
2
24
35

Well that prints text, but my goal is to add to the html code. When the page loads I want a bar to pop up. So I did document.body.appendChild(document.createTextNode("")); And it just prints it to the screen. – Andrew Yunt Sep 14 '14 at 02:56
Yes this is what a "TextNode" does you may want to consider adding some kind of different element using `var l = document.createElement("link"); l.setAttribute("rel","stylesheet"); ...`. Do your homework, use google. – LJᛃ Sep 14 '14 at 03:00

JavaScript code blocking CSS

3 Answers3