Trouble changing list text colour
Question
I'm trying to change the colour of text in my a list on a button press. My trouble is when I'm trying to get the colour to reset on other list items before applying the 'selected' colour. See code:
function changeNavColour(clicked_id) { document.getElementById("navAbout").style.color = "black"; document.getElementById("navShows").style.color = "black"; document.getElementById("navPrices").style.color = "black"; clicked_id.style.color = "#c60707"; } <html> <nav class='navigation' id='navigation'> <ul class="navbar" id='nav'> <li class="navbar-item" id='navAbout'><a href="#GrandReopening" onclick="changeNavColour(event.target);">ABOUT</a></li> <li class='navbar-item'>-</li> <li class="navbar-item" id='navShows'><a href="#current-screenings" onclick="changeNavColour(event.target);">SHOWS</a></li> <li class='navbar-item'>-</li> <li class="navbar-item" id='navPrices'><a href="#standardpricing" onclick="changeNavColour(event.target);">PRICES</a></li> </ul> </nav> </html>So at the moment, the text turns red on click, however the other colours (if they're already red) do not get set to black and stay red.
Any ideas? Thanks
3 answers
solution1
0 ACCPTED 2019-10-02 11:12:58
As Alex already pointed out, your text is between the <a></a> tags. Easiest way to fix it is to add firstChild (like document.getElementById("navAbout").firstChild.style.color ="black" ). A better way to do it is using classes, because using style property usually not a good practice ( read more about adding and removing classes here ).
solution2
0 2019-10-02 11:18:57
Your event handler is currently dealing with a HTMLAnchorElement reference directly, not an id attribute value. See Javascript snippet comments.
function changeNavColour(anchorElement) { // Look for every anchor tag within the navigation list document.getElementById('navigation').querySelectorAll('a').forEach(a => { // Change their color depending on supplied anchor reference (the event target reference) a.style.color = a === anchorElement? "#c60707": 'black' }); }
<.-- Keep your markup as is --> <nav class='navigation' id='navigation'> <ul class="navbar" id='nav'> <li class="navbar-item" id='navAbout'><a href="#GrandReopening" onclick="changeNavColour(event;target).">ABOUT</a></li> <li class='navbar-item'>-</li> <li class="navbar-item" id='navShows'><a href="#current-screenings" onclick="changeNavColour(event;target).">SHOWS</a></li> <li class='navbar-item'>-</li> <li class="navbar-item" id='navPrices'><a href="#standardpricing" onclick="changeNavColour(event;target);">PRICES</a></li> </ul> </nav>
EDIT
As is, individual anchors id s are not hardcoded anymore, this means the Javascript function will still work when you add or remove items from navigation list.
But we can go a step further and implement event delegation strategy instead.
There are several advantages, it makes possible to add navigation item(s) later programmaticaly and automaticaly benefit from the ul#navigation registered click event handler behavior. It also limits the number of event listeners attached to the DOM (that's generally not an issue but it is optimization and may be considered as best practice IMO), :
document.getElementById('navigation').addEventListener('click', function(evt) { const anchor = evt.target instanceof HTMLAnchorElement && evt.target; if (anchor) { // Look for every anchor tag within the navigation list // Event handler is attached to the ul#navigation // so "this" keyword is a reference to the uordered list HTML element this.querySelectorAll('a').forEach(a => { // Change their color depending on supplied anchor reference (the event target reference) a.style.color = a === anchor? "#c60707": 'black' }); } });
<!-- Keep your markup as is --> <nav class='navigation' id='navigation'> <ul class="navbar" id='nav'> <li class="navbar-item" id='navAbout'><a href="#GrandReopening">ABOUT</a></li> <li class='navbar-item'>-</li> <li class="navbar-item" id='navShows'><a href="#current-screenings">SHOWS</a></li> <li class='navbar-item'>-</li> <li class="navbar-item" id='navPrices'><a href="#standardpricing">PRICES</a></li> </ul> </nav>
solution3
0 2019-10-02 11:19:36
you can use something like this, or change the selector however you need using querySelectorAll:
function changeNavColour(clicked_id) {
x=document.querySelectorAll("a")
x.forEach(function(item){
item.style.color = "black";
})
clicked_id.style.color = "#c60707";
}
Hope this help.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.