Change color of navbar using javascript

Question

HTML

   <nav>
    <ul>
        <li><a class="notDrop" href="#home">HOME</a></li>
        <li><a class="notDrop" href="guides.html">GUIDES</a></li>
        <li class="dropdown">
            <a class="dropbtn">BRANDS</a>
                    <div class="dropdown-content">
                    <a href="gaming.html">NVIDIA</a>
                    <a href="#">INTEL</a>
                    <a href="#">CORSAIR</a>
                    <a href="#">SAMSUNG</a>
            <li class="dropdown">
                <a class="dropbtn">BUILDS</a>
                    <div class="dropdown-content">
                    <a href="gaming.html">GAMING</a>
                    <a href="#">OFFICE</a>
                    <a href="#">SERVER</a>
                    <a href="#">MEDIACENTER</a>
                    </div>
            </li>
    </ul>
</nav>

CSS

    nav {
    background-color: white;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

Javascript

    window.onload = function mobile(){
    if( isMobile.any() ) {
        document.getElementById('nav').style.backgroundColor = "blue";
       alert('Mobile'); 
    }
}

But I can't get it to change color, what am I doing wrong? I managed to change the color of the body but I cant of the nav.

Give the nav element an ID and change the getElement call to use that ID. Nav is the element type - not its ID. — Reinstate Monica Cellio, May 01 '17 at 15:01
@SuperCoolHandsomeGelBoy It works without the "document.getElementById('nav').style.backgroundColor = "blue";" code but not with it. — Leyer, May 01 '17 at 15:06

score 1 · Accepted Answer · 2017-05-01T15:17:13.077

1

You used the wrong javascript function. nav is a tag, not an id.

It should be getElementsByTagName("nav")[0] instead of getElementById("nav")

javascript will always return an array regardless of number of matching element using getElementsByTagName() method. So use [0] to return the first one.

edited May 01 '17 at 15:17

answered May 01 '17 at 15:00

Is it the first nav element on the page? – Reinstate Monica Cellio May 01 '17 at 15:01
Are you sure? He has not added any html – Rohith K P May 01 '17 at 15:01
@Mendax Now he has posted his html code. Still I insist this ans will work – May 01 '17 at 15:08
This answer needs clarification for people that end up here looking for help. Please explain it, and specifically mention that if they ever add another nav element to the page it may stop this working. – Reinstate Monica Cellio May 01 '17 at 15:15
Just another question, if I had css like this: nav a { css in here } how would I put it in the element? – Leyer May 01 '17 at 15:18
@Leyer you can use two times the `getElementsByTagName`. (But you need to use for loop to loop through each `a` element) Personally I will suggest you to use jQuery library. There you can enjoy simpler methods. – May 01 '17 at 15:20

score 0 · Answer 2 · answered May 01 '17 at 15:10

0

You used document.getElementById but you have only nav tag from HTML5. Add id = "nav" to your nav tag.

Best regards!

answered May 01 '17 at 15:10

arkadiuszch

1

score 0 · Answer 3 · answered May 01 '17 at 15:20

Your problem here is that you are using getElementById, but have not given your nav an id.

The best way to solve this would be to add an id to your nav, as follows:

<nav id="top-nav">

And your js becomes:

document.getElementById('top-nav').style.backgroundColor = "blue";

The answer given by Super Cool Handsome Gel Boy, while it will work is impractical because it looks for any <nav> tag, so if you add more <nav> tags, or move them around, you will have to recode your javascript.

By using an id, the javascript will always target the right <nav>.

Change color of navbar using javascript

3 Answers3