CODEWITHSUNDEEP
javascriptnavigationcss
user1321539
user1321539

Reputation: 13

Navigation Works Once, But Then Does Nothing

I'm trying to code a navigation bar with four elements. If the element is currently selected it will have a "red" background image, if it is one of the other 3, it will have a "black" background image. my four tabs are 'timetable, homework, notifications and sport' I tried making 8 functions like the 2 below

function setTimeRed() 
{
    document.getElementById("time").style.ClassName = 'timetable_r';
}

function setTimeBlack() 
{
    document.getElementById("time").style.ClassName = 'time_r';
}

And then four blocks like this:

function changeTimeButton()
{
    var timePath = new String();
    timePath = document.getElementById("timetable").style.backgroundImage;

    if(timePath == "url(assets/img/tabs/time_black.png)" || timePath == "")
    {
        setTimeRed();
        setHomeBlack();
        setNotiBlack();
        setSportBlack();
    }
    else {

    }  
}

finally, my html has this:

<div id="tabbar">
            <ul id="tabs">

                <a href"#" onclick="changeTimeButton()">
                    <li id="timetable" class="time_b">
                        <p>Timetable</p>
                    </li>
                </a>

                <a href"#" onclick="changeHomeButton()">
                    <li id="homework" class="home_b">
                        <p>Homework</p>
                    </li>
                </a>

                <a href"#" onclick="changeNotiButton()">
                    <li id="notifications" class="noti_b">
                        <p>Notifications</p>
                    </li>
                </a>

                <a href"#" onclick="changeSportButton()">
                    <li id="sport"  class="sport_b">
                        <p>Sport</p>
                    </li>
                </a>

            </ul>

        </div>

It works once then does nothing. Why?

Upvotes: 1

Views: 66

Answers (2)

Alex Morales
Alex Morales

Reputation: 1191

When turning the background color off, you need to remove any existing classes like this:

document.getElementById("timetable").className = 
document.getElementById("timetable").className.replace
( /(?:^|\s)time_b(?!\S)/ , '' )

Since you're using classes instead of modifying the styles in the javascript, you should stick to that. You seem to be trying to set the background image in the javascript. Instead, you should apply that background image to the class' styles in the CSS.

Using a framework like jQuery would make this much easier since it has helper functions such as addClass(), toggleClass(), and removeClass(). You should also set the 'a' tags inside the 'li'. It makes for cleaner code in my opinion. The browser will still read the click and be able to apply the classes correctly.

Also, you shouldn't have to repeat yourself so often in your code. One solution is to create a generic function and pass the element's id in as a parameter. Then, you use an 'active' class instead of 'timetable_r'. The active class will be applied to the active link and you won't have to write the functions out so many times. Hope this helps.

Upvotes: 1

vpv
vpv

Reputation: 938

I think error is in your script, just one example

document.getElementById("time").style.ClassName = 'timetable_r';

which should be (there are no elements with id "time" in your html, at least in the code you posted here)

document.getElementById("timetable").style.ClassName = 'timetable_r';

Another thing, if it works once, then seems it might save some issues with new session or existing session. I am not an expert on javascript. But if it helps, please inform.

Upvotes: 1

Related Questions