Develop Reference

How to change background color of button while clicking on it

I have a input box which consists of many buttons. i want it to behave like when clicking on a button i want that button row's background to be changed and revert it when clicking on other button.
I tried many approach but nothing works.
Can anyone help me in this scenario?
Here is my code:
var buttons = document.querySelectorAll(".green");
for (button in buttons) {
buttons[button].onclick = function() {
console.log('test') var yellowButton = document.querySelectorAll(".yellow")[0];
if (this.className == "green") {
if (yellowButton) yellowButton.className = "green";
this.className = "yellow";
}
}
}

Are you trying to do some sort of toggling like this?
function myFunc(btn) {
//get the current active button
var activeBtn = document.querySelector('button.active-btn');
if (activeBtn) {
activeBtn.classList.remove('active-btn'); //remove the .active-btn class
}
btn.classList.add('active-btn'); //add .active-btn class to the button clicked
}
.active-btn.green {
background-color: green;
}
.active-btn.yellow {
background-color: yellow;
}
.active-btn.red {
background-color: red;
}
.active-btn.blue {
background-color: blue;
}
button {
color: orange
}
<div>
<button type="button" class="red" onclick="myFunc(this)">Red</button>
<button type="button" class="blue" onclick="myFunc(this)">Blue</button>
<button type="button" class="green" onclick="myFunc(this)">Green</button>
<button type="button" class="yellow" onclick="myFunc(this)">Yellow</button>
</div>
You can also try adding a default "active-btn" class to the button you want and also adding a disable/enable effect like so:
function myFunc(btn) {
//remove .active-btn class if button is currently active
if (btn.className.indexOf('active-btn') !== -1) {
btn.classList.remove('active-btn');
} else {
//get the current active button
var activeBtn = document.querySelector('button.active-btn');
if (activeBtn) {
activeBtn.classList.remove('active-btn'); //remove the .active-btn class on currently active button
}
btn.classList.add('active-btn'); //add .active-btn class to the button clicked if not active
}
}
.active-btn.green {
background-color: green;
}
.active-btn.yellow {
background-color: yellow;
}
.active-btn.red {
background-color: red;
}
.active-btn.blue {
background-color: blue;
}
button {
color: orange
}
<div>
<button type="button" class="active-btn red" onclick="myFunc(this)">Red</button>
<button type="button" class="blue" onclick="myFunc(this)">Blue</button>
<button type="button" class="green" onclick="myFunc(this)">Green</button>
<button type="button" class="yellow" onclick="myFunc(this)">Yellow</button>
</div>

JS remove div with button after cloning

I have problem with removing div containing button. First I clone and add button, then change its class from 'add' to 'remove'. Then I try to remove div containing button with 'remove' but I can't access remove functions.
<div class="margin"></div>
<div class='new'>
<button type="button" class="btn btn-success add"><i class="fas fa-plus"></i></button>
</div>
<script>
$(document).ready(function() {
var div = document.getElementById('new');
$(".add").click(function(){
clone = div.cloneNode(true);
$(clone).insertAfter(".margin");
$("button.add:not(:last)).removeClass('add').addClass('remove');
$(".remove").click(function(){
console.log('inside')
//$(this).parent('div').remove();
});
});
</script>

document.getElementById('new') ... ur element does not have an ID. Its class-name is 'new' but not its ID. Some corrections should make it work:
$(document).ready(function() {
var div = document.getElementById('new');
$(".add").click(function(){
clone = div.cloneNode(true);
$(clone).insertAfter(".margin");
$("button.add:not(:last)").removeClass('add').addClass('remove');
$(".remove").click(function(){
console.log('inside')
//$(this).parent('div').remove();
});
})
});
.add {
background: green;
}
.remove {
background: red;
}
button {
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="new">
<button type="button" class="btn btn-success add">
<i class="fas fa-plus"></i> new
</button>
</div>
<div class="margin"></div>
Edit:
Is there a more elegant way to do this?
Maybe like so:
$('.add').on('click', function() {
$(this).clone()
.toggleClass('add remove')
.on('click', function() {
$(this).remove()
})
.prependTo('#new');
})
.add {
background: green;
}
.remove {
background: red;
}
button {
color: white;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="new">
<button type="button" class="btn btn-success add">
<i class="fas fa-plus"></i> new
</button>
</div>

Change CSS of div when clicking on a button

Is it possible to change the background image of a div when a button outside of the div is selected?
e.g.
HTML
<div id="change"></div>
<div id="buttons">
<button class="button1">this</button>
<button class="button2">that</button>
<button class="button3">there</button>
<button class="button4">then</button>
</div>
CSS
#change{
background-image: url("this.jpg")
}
Desired effect when clicking button 2 (same for each button; 3 = there.jpg, 4 = then.jpg)
#change{
background-image: url("that.jpg")
}

Using javascript you can set the backgroundImage. Using jQuery you'd use $.css('background-image');
You could also use JS/jQuery to add a class to the element, and you can set the background-image in CSS for that class.
document.getElementById('button').addEventListener('click',function() {
document.getElementById('change').style.backgroundImage = 'url(https://futurism.com/wp-content/uploads/2015/11/neildegrassetyson.jpg)';
})
#change {
background: #eee;
width: 600px;
height: 375px;
}
<button id="button">button</button>
<div id="change"></div>
document.getElementById('button').addEventListener('click',function() {
document.getElementById('change').classList.add('bg');
})
#change {
background: #eee;
width: 600px;
height: 375px;
}
#change.bg {
background-image: url(https://futurism.com/wp-content/uploads/2015/11/neildegrassetyson.jpg)
}
<button id="button">button</button>
<div id="change"></div>

You can do this but it will require JavaScript:
Your HTML:
<div id="buttons">
<button class="button1" onclick="changeBG('image1.jpg')">this</button>
<button class="button2" onclick="changeBG('image2.jpg')">that</button>
<button class="button3" onclick="changeBG('image3.jpg')">there</button>
<button class="button4" onclick="changeBG('image4.jpg')">then</button>
</div>
<script>
function changeBG(image) {
var urlString = "url(" + image + ")";
document.getElementById('change').style.backgroundImage = urlString;
}
</script>
This is not the prettiest way to do this but it should accomplish getting you started.

This is what you need in jQuery :D
$('#buttons button').on('click',function() {
var val = $(this).text();
$('#change').css('background-image','url('+val+'.jpg)');
});
put the script inside $(document).ready(function() {

how to make Active Buttons once it is selected

I have this code where I link few flies in an IFrame, i want the color of the selected button to change and remain different until another button is pressed.
<style>
.myButton:active
{
position:relative;
top:1px;
}
</style>
<a class="myButton " href="" target="someFrame">Button1</a>
<a class="myButton " href="" target="someFrame" >Button 02</a>
<a class="myButton " href="" target="someFrame">Button 03</a>
<a class="myButton " href="" target="someFrame">Button 04</a>
<a class="myButton " " target="someFrame" >Button 05</a>

What you could do is have a JS/jQuery function that is called when the button is pressed. That function would be something like the pseudo code below:
function(){
removeClassFromOtherButtons('activeClass');
this.addClass('activeClass');
}
Then in your CSS, have .activeClass have a different colored background.

If you'd prefer a solution without JavaScript, you can achieve that with some hidden radiobutton trickery:
input[type="radio"][name="toggleRadio"] {
display: none;
}
input[type="radio"][name="toggleRadio"] + a label {
cursor: pointer;
}
input[type="radio"][name="toggleRadio"]:checked + a {
color: #000;
text-decoration: none;
}
<input type="radio" name="toggleRadio" id="toggleRadio1"><label class="myButton" for="toggleRadio1">Button1</label>
<input type="radio" name="toggleRadio" id="toggleRadio2"><label class="myButton" for="toggleRadio2">Button2</label>
<input type="radio" name="toggleRadio" id="toggleRadio3"><label class="myButton" for="toggleRadio3">Button3</label>
<input type="radio" name="toggleRadio" id="toggleRadio4"><label class="myButton" for="toggleRadio4">Button4</label>
<input type="radio" name="toggleRadio" id="toggleRadio5" checked><label class="myButton" for="toggleRadio5">Button5</label>

On your css file create an .active class that will be added to a button when pressed and removed from the others.
var buttons = document.querySelectorAll('.myButton');
buttons.forEach(function(button) {
button.addEventListener('click', function() {
toggleClass(buttons, this);
});
});
function toggleClass(buttons, buttonToActivate) {
buttons.forEach(function(btn) {
btn.classList.remove('active');
});
buttonToActivate.classList.add('active');
}

So, the :active is a :pseudo-class that is used when the button or anchor is being pressed.
If you want to your button to have a active state you need mark it with another class.
var buttons = document.querySelectorAll('.myButton');
var activeClassName = 'active';
function activeState(items, activeName) {
for(var i = 0; i < items.length; i++) {
if(items[i].classList.contains(activeName)) {
items[i].classList.remove(activeName);
}
}
}
for(var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function(e){
activeState(buttons, activeClassName);
e.target.classList.add(activeClassName);
});
}
.myButton {
position:relative;
top:1px;
}
.myButton.active {
background: #f00;
color: #fff;
border-color: #f00;
}
<button class="myButton">Test 1</button>
<button class="myButton">Test 2</button>
<button class="myButton">Test 3</button>
<button class="myButton">Test 4</button>
<button class="myButton">Test 5</button>
<button class="myButton">Test 6</button>
I used here vanilla javascript but this code can be re-written using ES6 or Jquery and it will be much more simple.
Here some reference links for you:
https://www.w3schools.com/css/css_pseudo_classes.asp
https://developer.mozilla.org/docs/Web/API/Element/classList
https://developer.mozilla.org/docs/Web/API/Element/addEventListener

Once you click the button call onclick function
Use common class name to remove active class from all buttons then add active class to specific button
In css give color which you want selected button to be
.active{
background:red;}
Onclick function
$(".mybutton").on("click",function(event){ addclassactive(event.target);
}
function addclassactive (caller){
$(".mybutton").removeClass("active");
$(caller).addClass("active"):
}

toggle button with font awesome and jquery

I thought this was going to be simple, but I am having a bit of hard time getting this to work. I am able to toggle once using .show and .hide, but not able to toggle back.
all the help would be appreciated.
here is the code:
<div class="middle">
<i class="fa fa-toggle-on fa-2x active" id="on" style="display:none;"></i>
<i class="fa fa-toggle-on fa-2x fa-rotate-180 inactive" id="off" ></i>
</div>
$(document).ready(function(){
$('.middle').click(function(){
$('.inactive').show();
$('.active').hide();
})
.click(function(){
$('.inactive').hide();
$('.active').show();
});
});
I also have a pen of it here: http://codepen.io/lucky500/pen/qdZPLe

one approach is to use toggle
$(document).ready(function(){
$('.middle').click(function() {
$('.inactive, .active').toggle();
});
});
http://codepen.io/miguelmota/pen/zGqPOX

Why not simplify this a bit by using a single element with .toggleClass().
http://jsbin.com/ceyilucuya/1/edit?html,css,js,output
$('.toggler').on('click', function () {
$(this).toggleClass('fa-rotate-180 on');
});

The structure of your HTML it a little funky, however I found a dirty fix to your problem. The following code i repeat is a dirty fix, but it works.
http://codepen.io/anon/pen/MwyEdq
JS
$(document).ready(function(){
i = 0;
$(".fa-toggle-on").click(function() {
if ( i == 0) {
$('.inactive').hide();
$('.active').show();
i++;
}
else if ( i == 1) {
$('.inactive').show();
$('.active').hide();
i = 0;
}
});
});
HTML
<div class="middle">
<i class="fa fa-toggle-on fa-2x active" id="on" style="display:none;"></i>
<i class="fa fa-toggle-on fa-2x fa-rotate-180 inactive" id="off" ></i>
</div>
CSS
.middle {
text-align: center;
margin: 0 auto;
padding: 2rem;
}
.active {
color: green;
}

Generally and simply it works like this:
You can use this in general purposes.
<script>
$(document).ready(function () {
$('i').click(function () {
$(this).toggleClass('fa-plus-square fa-minus-square');
});
});
</script>

Rotating the fontawesome icon is a nice idea, however the browser may show some change in the vertical positioning since the icon has different transparent margins with respect to the visible pixels.
I combined the solutions of #miguel-mota and #oka.
Only one fontawesome tag is needed, the classes are switched in the on click function for the class .toggler.
Make sure to use the each function to apply multiple transformations.
JS
$('.toggler').on('click', function () {
$(".my-button").each(function(){
$(this).toggleClass('fa-toggle-off');
$(this).toggleClass('fa-toggle-on');
$(this).toggleClass('active');
})
});
CSS
.toggler {
text-align: center;
margin: 0 auto;
padding: 2rem;
cursor: pointer;
color: black;
}
.active {
color: green;
}
HTML
<div class="toggler">
<i class="fa fa-toggle-off fa-2x inactive my-button"></i>
</div>

This jQuery plugin worked well for me: https://github.com/hurkanaras/Hurkan-Switch-Plugin
An example:
$('[data-toggle="hurkanSwitch"]').hurkanSwitch({
'width':'90px',
'offConfirm': function(r) { return confirm('Are you sure you want to disable this?'); },
'on': function(e) { toggle(e, 'enable'); },
'off': function(e) { toggle(e, 'disable'); },
'onColor': 'green',
'offColor': 'red',
'className': 'switch-toggle' //I changed the font size with this
});

<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" >
</head>
<body>
<i id='checkboxAbcToggle' class='far fa-square cursorIcon'></i> Show Abc
</body>
=================
$('#checkboxAbcToggle').click(function () {
// Toaster.top('toggleClass');
UiUx.setCheckbox('#checkboxAbcToggle');
});
let Key = {
uncheckedSquare: 'fa-square',
checkedSquare: 'fa-check-square',
}
let UiUx = {};
UiUx.setCheckbox = function (checkboxIcon_jqId) {
let checkboxIconElement = $(checkboxIcon_jqId);
let isChecked = checkboxIconElement.hasClass(Key.checkedSquare);
if (isChecked === true) {
checkboxIconElement.removeClass(Key.checkedSquare);
checkboxIconElement.addClass(Key.uncheckedSquare);
}
else {
checkboxIconElement.removeClass(Key.uncheckedSquare);
checkboxIconElement.addClass(Key.checkedSquare);
}
}

css
.rotate{
transform:rotate(180deg);
color:black
}
jquery
$('.fa-toggle-on').on('click',function() {
$(this).toggleClass('rotate')
});