Change Button color onClick
There are indeed global variables in javascript. You can learn more about scopes, which are helpful in this situation.
Your code could look like this:
<script>
var count = 1;
function setColor(btn, color) {
var property = document.getElementById(btn);
if (count == 0) {
property.style.backgroundColor = "#FFFFFF"
count = 1;
}
else {
property.style.backgroundColor = "#7FFF00"
count = 0;
}
}
</script>
Hope this helps.
Change the color of a button when clicked with javascript
You'll need to set up an event handler so that when any button gets clicked, all the buttons are reset so that no one of them is active. Then, set the clicked button to be active by styling it. But, instead of setting up multiple handlers, just set up one at the document level that will receive any clicks via bubbling ("event delegation").
// Get all the buttons into a node list
let buttons = document.querySelectorAll(".button-categories-link");
// Set an event handler on the document so that when
// any element is clicked, the event will bubble up to it
document.addEventListener("click", function(evt){
// Check to see if it was a button that was clicked
if(evt.target.classList.contains("button-categories-link")){
// Loop over all the buttons & remove the active class
buttons.forEach(function(button){
button.classList.remove("active");
});
// Make the clicked button have the active class
evt.target.classList.add("active");
}
});.active { background-color:#ff0; }<div class="button-categories">
<a href="#" class="button-categories-link">Candidates</a>
</div>
<div class="button-categories">
<a href="#" class="button-categories-link">Contacts/Guests</a>
</div>
<div class="button-categories">
<a href="#" class="button-categories-link">Jobs</a>
</div>
<div class="button-categories">
<a href="#" class="button-categories-link">Clients</a>
</div>Change Button Color when click on the Button
Something like this?
$( "button.change" ).click(function() { $( "button.change.selected" ).removeClass("selected"); $(this).toggleClass( "selected" );});.Button { font-family: Calibri, sans-serif; font-size:13px; font-weight: bold; width: 160px; height: 25px; background:grey; color: white}.selected { color: white; background:green}button#cssColorChange:active{ color: white; background:red}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><button class="Button change" id="jQueryColorChange">Click to change color</button><br><br><button class="Button change" id="jQueryColorChange">Click to change color</button><br><br><button class="Button change" id="jQueryColorChange">Click to change color</button><br><br><button class="Button change" id="jQueryColorChange">Click to change color</button>How can I change button color when clicked
You can check if the attr value is undefined or not using (typeof $(this).attr("data-toggle")) !== 'undefined'
Demo Code :
$('.btn--primary').on("click", function(e) {
//check if the attr type is not undefined
(typeof $(this).attr("data-toggle")) !== 'undefined' ? "" : $(this).removeClass("btn--ghost").addClass("btn--plain");
});.btn--ghost {
color: red;
}
.btn--plain {
color: blue
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="o-block-global__links link_choice ">
<button type="button" class="btn btn--ghost btn--primary">
OUI
</button>
<button type="button" class="btn btn--ghost btn--primary" data-toggle="modal" data-target="#modalChoice2">
NON
</button>Editing Javascript to change button color once clicked
All you need to do is create a check if current[0] is undefined or not, this should work just fine
var header = document.getElementById("buttonscontainer");
var btns = header.getElementsByClassName("button");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
if(current[0] != undefined){
current[0].className = current[0].className.replace(" active", "");
}
this.className += " active";
});
}.button {
background-color: #92afde;
margin: 10px;
color: #ffffff;
font-weight: bold;
text-align: center;
border: solid 2px #92afde;
border-radius: 5px;
width: 150px;
}
.active, .button:hover {
background-color: #32a852;
}<div id="buttonscontainer">
<div class="button">Test1</div>
<div class="button">Test2</div>
<div class="button">Test3</div>
<div class="button">Test4</div>
<div class="button">Test5</div>
</div> Change color button when click with Razor Page
I use css(.btn:focus) and it can work.Here is a demo:
<div>
<div class="row">
<div class="column" style="width:30%">
<div class="btn-group">
<button type="button" class="btn btn-primary">Language.T35</button>
<button type="button" class="btn btn-primary">Language.T36</button>
<button type="button" class="btn btn-primary">Language.T37</button>
</div>
</div>
<div class="column" style="width:70%">
<div class="btn-group">
<button type="button" class="btn btn-primary">Language.T138</button>
<button type="button" class="btn btn-primary">Language.T38</button>
<button type="button" class="btn btn-primary">Language.T39</button>
<button type="button" class="btn btn-primary">Language.T40</button>
</div>
</div>
</div>
</div>
<style>
.btn:focus {
background-color: #ff6e40;
}
</style>
result:
Related Topics
Jquery Validate Phone Number With With Regex
How to Hide Div When You Scroll to Bottom and Show It Again When Scroll Up to Top
Pass Input Tag Value to as Href Parameter
Stylesheet Not Loading Because Mime Type Is Text/Html
React - How to Add Dynamic Key/Value Pair to an Object
How to Store Data After Refreshing the Web Page
Refresh Page and Keep Scroll Position
Make an Angular *Ngfor Draw Two Different Columns of Data
Why Does This Onclick Event Not Work in an HTML Iframe
Reactjs and Images in Public Folder
How to Change Data Due to Selected Value in Select Vue
Ngx-Datatable Set Column Width Dynamically
Convert Milliseconds to Hours and Minutes Using Momentjs
Close Window Automatically After Printing Dialog Closes
Pass Data from HTML Table to Modal and Then to PHP Script
How to Unit Test If an Element Is Visible When the *Ngif Directive Is Used Using Jasmine in Angular