Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Botos Claudia
Front End Web Development Techdegree Graduate 18,765 PointsChange button color on click using JavaScript
Hey there! I have a problem with my code. I want to style some buttons, so that one is clicked to change it's background-color while the other remain the same. I tried applying an event handler and when I click on a button all get to change their background color and it is not what I want. I want only the one clicked to have a background color, and once I click another button to return to it's current state , while the clicked one will get to background-color. Thanks in advance!!
Here is some of my code: HTML, CSS and JS
<nav class='chart-nav clearfix'>
<ul id='button'>
<li><a href='#hourlyChart' id='hour-nav' class='buttonChart'>Hourly</a></li>
<li><a href='#dailyChart' id='day-nav' class='buttonChart'>Daily</a></li>
<li><a href='#weeklyChart' id='week-nav' class='buttonChart'>Weekly</a></li>
<li><a href='#monthlyChart' id='month-nav' class='buttonChart'>Monthly</a></li>
</ul>
</nav>
.clicked li{ background-color: #6bce6b; border-radius: 15px; color: #fff; width: 80px;
}
//Change Color to selected buttons
$('#button').click(function() { $(this).addClass('clicked'); });
4 Answers
Tsenko Aleksiev
3,819 PointsI'm not sure but you are adding the class to id button - that's your ul element and adding the class to the parent element ul you get the result - all the buttons, the li's are looking the same. You have to add the class to each button in the li element in order to get the result only to that particular button. I'm writing from my phone and I can't test it but I think you need to do it like this: if a li-button is clicked add this class to it, if it has the class allready, than on click remove the class for the background color. Use let's say button.buttonChart to select and add the function to it to be sure that only the buttons with that class ( in this particular ul ) will be selected. I think this will do the trick, once more srry that I can't test it first, try it out and give me a feedback, I'm bored at work :)
Botos Claudia
Front End Web Development Techdegree Graduate 18,765 PointsI can't seem to make it work . I tried so
if($('navChart')== clicked) { $(this).toggleClass('clicked'); } else { $(this).toggleClass('navChart'); }
Botos Claudia
Front End Web Development Techdegree Graduate 18,765 PointsOh sorry, I do not know what I am writing apparently . I changed the code to this but still it does nothing
//Change Color to selected buttons
$('li').click(function(clicked) {
if($('.button-chart')== clicked) { $(this).toggleClass('clicked'); } else { $(this).toggleClass('chart-nav'); }
});
Tsenko Aleksiev
3,819 PointsThen on the first button just add the second class: buttonChart space clicked. Now it will have the class and you should remove the clicked class once you push the button :) EDIT: You did not write anymore so I assume you are ok? If not, is this what you wanted to do:
<li><a href='#hourlyChart' id='hour-nav' class='buttonChart clicked'>Hourly</a></li>
$('a').on("click", function(){
if($(this).hasClass("clicked")){
$(this).removeClass("clicked");
} else {
$(this).addClass("clicked");
}
});
Of course, there are other ways to do it, but this is the most understandable...at least for me :D I'm not really sure what do you want to do, so if this isn't helping tell me the idea :)
Tsenko Aleksiev
3,819 PointsDid it work, Popa Claudia?
Botos Claudia
Front End Web Development Techdegree Graduate 18,765 PointsWell it works to a point where the button is applied to background color on click, thanks. I managed to do it too yesterday , what I try now to do is, for a button to return to it's initiate state once I click on another one . Thanks a lot for your help , I really appreciate it!