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 divs inside index. — loveNoHate
– loveNoHate, Commented Sep 14, 2014 at 2: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
– Michael0x2a, Commented Sep 14, 2014 at 2:50
you can use += but this is bad practice apparently, as it makes it re parse stuff again -disclaimer: that is an answer to one of my questions — ajax333221
– ajax333221, Commented Sep 14, 2014 at 6:18

Barmar · Accepted Answer · 2014-09-14 02:51:20Z

4

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>

answered Sep 14, 2014 at 2:51

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

lucusp · Accepted Answer · 2014-09-14 02:52:03Z

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, 2014 at 2:52

lucusp

1851 gold badge2 silver badges9 bronze badges

2 Comments

Andrew Yunt Over a year ago

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.

lucusp Over a year ago

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.

LJᛃ · Accepted Answer · 2014-09-14 02:50:35Z

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, 2014 at 2:50

LJᛃ

8,2232 gold badges27 silver badges35 bronze badges

2 Comments

Andrew Yunt Over a year ago

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("<link rel='stylesheet' type='text/css' href='loaded.css'>")); And it just prints it to the screen.

LJᛃ Over a year ago

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.

Collectives™ on Stack Overflow

JavaScript code blocking CSS

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related