Javascript not rendering content

Question

I am trying to display content using javascript DOM but every time I run my solution I get a blank page. My HTML file is as follows:

<!DOCTYPE html>
    <html>
    <head>
        <title>Radiant HQ</title>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>
    <body>
        <nav id="navigationcontent"></nav>
        <script type="text/javascript" src="assets/js/radiant.js">
        </script>
    </body>
</html>

My js file looks this way:

@import ('../css/style.css');
document.getElementById("navigationcontent").innerHTML=`
<ul>
    <li><a href="">Home</a> </li>
    <li><a href="">About Us</a> </li>
    <li><a href="">Research</a> </li>
    <li><a href="">Contacts</a> </li>
</ul>`;

@import ('../css/style.css'); why is this in javascript snippet? — doğukan
– doğukan, Commented Mar 16, 2020 at 21:38
^ This. And have you looked at your DevTools console for more information? — chriskirknielsen
– chriskirknielsen, Commented Mar 16, 2020 at 21:58

shadow2020 · Accepted Answer · 2020-03-17 15:05:19Z

1

Your code works. There is one problem though.

It's getting stuck on the @import ('../css/style.css'); line. Try removing that whole line and include your CSS some other way. Typically this in done in the head of the document via html.

edited Mar 17, 2020 at 15:05

answered Mar 16, 2020 at 22:13

shadow2020

1,3612 gold badges10 silver badges36 bronze badges

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

Collectives™ on Stack Overflow

Javascript not rendering content

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related