Develop Reference

How to add class to buttons on click

Sorry for silly question , but I can't add class to button on click. I have list of buttons and on click I need to change background of active button . I dont know how to get index of element on click inside list and add class. I need to make it on pure javascript. Only need to leave $(document).ready(function() . Here is my fiddle https://jsfiddle.net/armakarma/ns5tfcL0/15/
HTML
<div class="content-itinerary__buttons-wrapper">
<button class="content-itinerary__buttons description-text ">Day 2</button>
<button class="content-itinerary__buttons description-text">Day 3</button>
<button class="content-itinerary__buttons description-text">Day 4</button>
</div>
JS
$(document).ready(function() {
let myBtns=document.querySelector('.content-itinerary__buttons-wrapper')
myBtns.addEventListener('click', ()=>{
console.log('test')
})
});

Only need to leave $(document).ready(function()
I am not sure why do you need to leave that when you have the equivalent JavaScript (DOMContentLoaded).
Loop through all the buttons, inside the event handler function first remove the class from all the buttons then add the class only to the clicked button:
document.addEventListener('DOMContentLoaded', () => {
let myBtns=document.querySelectorAll('.content-itinerary__buttons');
myBtns.forEach(function(btn) {
btn.addEventListener('click', () => {
myBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
});
});
});
.active {
color: #fff;
background-color: #4CAF50;
}
<div class="content-itinerary__buttons-wrapper">
<button class="content-itinerary__buttons description-text ">Day 2</button>
<button class="content-itinerary__buttons description-text">Day 3</button>
<button class="content-itinerary__buttons description-text">Day 4</button>
</div>

You just need to use event object in click event
$(document).ready(function() {
let myBtns=document.querySelectorAll('.content-itinerary__buttons-wrapper')[0];
myBtns.addEventListener('click', (e)=> {
if (e.target.className.indexOf('clicked') === -1) {
e.target.className += ' clicked';
} else {
e.target.className = e.target.className.replace(' clicked', '');
}
})
});

This is your solution
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("content-itinerary__buttons");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
.content-itinerary__buttons-wrapper {
display: flex;
margin-top: 20px;
}
.content-itinerary__buttons {
flex-grow: 1;
padding: 21px 15px 15px 15px;
box-sizing: border-box;
border: 1px solid #D7D7D7;
outline: none;
&:not(:last-child) {
border-right: 0;
}
}
.active, .btn:hover {
background-color: red;
color: white;
}
<div class="content-itinerary__buttons-wrapper" id="myDIV">
<button class="content-itinerary__buttons description-text active ">Day 2</button>
<button class="content-itinerary__buttons description-text">Day 3</button>
<button class="content-itinerary__buttons description-text ">Day 4</button>
<button class="content-itinerary__buttons description-text">Day 5</button>
<button class="content-itinerary__buttons description-text">Day 6</button>
<button class="content-itinerary__buttons description-text">Day 7</button>
<button class="content-itinerary__buttons description-text">Day 8</button>
<button class="content-itinerary__buttons description-text">Day 9</button>
<button class="content-itinerary__buttons description-text">Day 10</button>
</div>
See Code link

I would definitely use Element.classList API for adding/removing classes to/from elements.
Why?
Adding/removing classes won't affect other classes already set to the element
Updating the className of the element will replace all existing classes
It comes with handy functions like "toggle" and "replace
Your code will look something like this:
$(document).ready(function() {
let myBtns=document.querySelectorAll('.content-itinerary__buttons-wrapper')
myBtns
.forEach(btn => btn
.addEventListener('click', (e)=>{
// Check if the classList already exists on the element clicked
// If so, remove it
// Else, add it
e.classList.contains('clicked')
? e.classList.add('clicked')
: e.classList.remove('clicked');
})
);
});

Onclick of the button you can set class name to the button
function a(e)
{
e.setAttribute("class","active");
}
.active
{
color:red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-itinerary__buttons-wrapper">
<button class="content-itinerary__buttons description-text" onclick="a(this)">Day </button>
<button class="content-itinerary__buttons description-text" onclick="a(this)">Day </button>
<button class="content-itinerary__buttons description-text" onclick="a(this)">Day </button>
</div>

If you going to get rid of jQuery replace wrapper function to use listen for DOMContentLoaded event. It's the same as jQuery documentReady.
In your click handler use event object, ev.target in my example is a button which fired the event. Then use classList property to add your class.
document.addEventListener('DOMContentLoaded', function(){
let myBtns=document.querySelector('.content-itinerary__buttons-wrapper')
myBtns.addEventListener('click', (ev)=>{
let btn = ev.target;
btn.classList.add('red');
});
});

Just use forEach loop :)
$(document).ready(function() {
let myBtns=document.querySelectorAll('.content-itinerary__buttons-wrapper')
let myAllButtons = myBtns.querySelectorAll('.content-itinerary__buttons')
myAllButtons.forEach(function(element) {
element.onclick = () => element.classList.add('some-class')
})
});

How to apply javascript to multiple button groups

I have css and js on a button group so that when you click a button from the group it shows as active, and when you click a different button, that button becomes active and the rest are cleared. I have to have 22 of these button groups (I only put 2 here for the sake of space) on my page, when I have just one the code works, but when I add the others everything comes crumbling down, can anyone help! How do use the script multiple times, where the script is applied to every group and doesn't intervene with the others.
function codeAddress() {
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
}
window.onload = codeAddress;
.btn {
background-color: white;
border: 3px solid #0099ff;
color: #0099ff;
cursor: pointer;
float: left;
padding: 10px 16px;
font-size: 18px;
}
.active,
.btn:hover {
background-color: #0099ff;
color: white;
border: 3px solid #0099ff;
cursor: pointer;
}
<div id="myDIV">
<button class="btn active">GQL</button>
<button class="btn">PSV</button>
<button class="btn">WT2</button>
<button class="btn">NBV</button>
<button class="btn">MBD</button>
</div>
<div id="myDIV">
<button class="btn active">GQL</button>
<button class="btn">PSV</button>
<button class="btn">WT2</button>
<button class="btn">NBV</button>
<button class="btn">MBD</button>
</div>

Here give this ago. I believe this is the intended response you expect when clicking button from different groups. Something like radio buttons. As already mentioned an ID can only represent one element not several. Use class instead. So i have changed your id to a class btn-group.
function codeAddress() {
const btnClick = function () {
this.parentNode.getElementsByClassName("active")[0].classList.remove("active");
this.classList.add("active");
};
document.querySelectorAll(".btn-group .btn").forEach(btn => btn.addEventListener('click', btnClick));
// This is the same as above just another way of doing it. use which ever you like
// var btns = document.querySelectorAll(".btn-group .btn");
// for (var i = 0; i < btns.length; i++) {
// btns[i].addEventListener("click", function () {
// this.parentNode.getElementsByClassName("active")[0].classList.remove("active");
// this.classList.add("active");
// });
// }
}
window.onload = codeAddress;
.btn {
background-color: white;
border: 3px solid #0099ff;
color: #0099ff;
cursor: pointer;
float: left;
padding: 10px 16px;
font-size: 18px;
}
.active,
.btn:hover {
background-color: #0099ff;
color: white;
border: 3px solid #0099ff;
cursor: pointer;
}
<div class="btn-group">
<button class="btn active">GQL</button>
<button class="btn">PSV</button>
<button class="btn">WT2</button>
<button class="btn">NBV</button>
<button class="btn">MBD</button>
</div>
<br style="clear:both">
<div class="btn-group">
<button class="btn active">GQL</button>
<button class="btn">PSV</button>
<button class="btn">WT2</button>
<button class="btn">NBV</button>
<button class="btn">MBD</button>
</div>

Here the example what you need https://jsbin.com/bomegabiqo/1/edit?html,js,output
First of all, I want to say that you don't need to have two div with the same id
The second point is that you need to attach eventListener to the parent element, due to best-practice and performance optimization (you can read about it somewhere)
So here is updated version of HTML:
<div id="myGroupButtonsWrapper">
<div id="myDIV">
<button class="btn active">GQL</button>
<button class="btn">PSV</button>
<button class="btn">WT2</button>
<button class="btn">NBV</button>
<button class="btn">MBD</button>
</div>
<div id="myDIVV">
<button class="btn">GQL</button>
<button class="btn">PSV</button>
<button class="btn">WT2</button>
<button class="btn">NBV</button>
<button class="btn">MBD</button>
</div>
</div>
And JavaScript:
function codeAddress() {
function myClickCallback(e) {
if (e.target.className === 'btn') {
var allButtons = document.querySelectorAll("#myGroupButtonsWrapper .btn");
allButtons.forEach((elem) => {
elem.className = elem.className.replace(" active", "");
});
e.target.className += ' active';
} else {
return;
}
}
var header = document.getElementById("myGroupButtonsWrapper");
header.addEventListener("click", myClickCallback);
}
window.onload = codeAddress;

It's not working because you have multiple IDs:
<div id="myDIV">...</div>
<div id="myDIV">...</div>
You can't do this - first, it's invalid HTML, and second, it'll do one of two things with the JS: cause an error, which you can see in the console, or it'll treat header as a NodeList, which is a collection of nodes that match the query selection, which means that it won't work. If you make them all have different IDs (e.g. div1, div2, div3, etc), it'll work if you modify your code to take multiple divs.
The other option is to make a class (e.g. myDIV) and modify your existing JavaScript code to use a class.

Instead of individual buttons, I would recommend using radio buttons for something like this. It already has functionality built in to group together for a selection similar to what you're going for. Then you just have to use built in commands to set the active button or check the values.
https://www.w3schools.com/jsref/prop_radio_checked.asp
https://www.w3schools.com/html/html_forms.asp

it is fairly simple to accomplish this using just 3 steps.
// First step is to create a onBtnClick handler function:
// The btn which was clicked can be accessed from event.target
// And then we can use the build in function classList.toggle to toggle the active class on that btn
const onBtnClickHandler = function (ev){ev.target.classList.toggle("active")};
// Next step is to find all btns, this can be done using the build in querySelectorAll function
const btns = document.querySelectorAll('.btn'); //returns NodeList array
// Last step is to add the eventListener callback function to each btn
btns.forEach(btn => btn.addEventListener('click', onBtnClickHandler));
Hope this helps.

Using array to change colours

hi I'm trying to use an array to change colors. I want to Make a function called ChangeColor(num) with an argument for numbers and Use the function to change the color of the box so when the button is clicked on, it calls on the function and sends the correct number so that "box.style.backgroundColor = arrName[num];" Heres what i got so far.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width:200px;
height:200px;
background-color:black;
}
</style>
</head>
<body>
<div id="group">
<button id="blue">Blue</button>
<button id="red">Red</button>
<button id="green">Green</button>
</div>
<div id="box"></div>
<script type="text/javascript">
var colors = ["blue","red","green"];
var blue = document.getElementById("blue");
var red = document.getElementById("red");
var green = document.getElementById("green");
var box = document.getElementById("box");
var numclicks = 0;
blue.addEventListener("click", function() {
if(numclicks == 0) {
box.style.backgroundColor = colors[0];
}
});
red.addEventListener("click", function() {
if(numclicks == 0) {
box.style.backgroundColor = colors[1];
}
});
green.addEventListener("click", function() {
if(numclicks == 0) {
box.style.backgroundColor = colors[2];
}
});
</script>
</body>
</html>

You can simply attach an event listener to the buttons within #group and set the background-color of the #box the id of the clicked button:
var box = document.querySelector('#box');
document
.querySelectorAll('#group button')
.forEach(function (el) {
el.addEventListener('click', function () {
box.style.backgroundColor = el.id;
});
});
#box {
width:200px;
height:200px;
background-color:black;
}
<div id="group">
<button id="blue">Blue</button>
<button id="red">Red</button>
<button id="green">Green</button>
</div>
<div id="box"></div>

standard function
const colors = ["blue","red","green"];
const defaultColor = "white"; // if you want for kill errors
function changeColor(num){
document.querySelector("#box").style.backgroundColor = colors[num]||defaultColor
}
then you can added onclick events to buttons like this
<div id="group">
<button onclick="changeColor(0)" id="blue">Blue</button>
<button onclick="changeColor(1)" id="red">Red</button>
<button onclick="changeColor(0)" id="green">Green</button>
</div>
or with attributes like (but keep buttons elements depend to same order of array colors names)
html
<div id="group">
<button number="0" id="blue">Blue</button>
<button number="1" id="red">Red</button>
<button number="2" id="green">Green</button>
</div>
javascript
document.querySelectorAll("#group button").forEach((button)=>{
button.addEventListener('click', function () {
changeColor(button.getAttr("number"));
});
});

The other solutions use practices that are currently considered better. Here is a solution that includes the unnecessary array.
function changeColor(num) {
var colors = ['blue', 'red', 'green'];
document.getElementById('box').style.backgroundColor = colors[num];
}
#box {
width: 200px;
height: 200px;
background-color: black;
}
<div id="group">
<button id="blue" onclick="changeColor(0)">Blue</button>
<button id="red" onclick="changeColor(1)">Red</button>
<button id="green" onclick="changeColor(2)">Green</button>
</div>
<div id="box"></div>

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"):
}

How to clone, modify (increment some elements) before appending using jQuery?

I have an element that contains multiple elements inside it, what I need is to clone the element, but on every "new" element, I need to increment an element (the object number -see my script please-)
In the script I'm adding I need (every time I click on the button) to have : Hello#1 (by default it's the first one) but the first click make : Hello#2 (and keep on top Hello#1) second click = Hello#1 Hello#2 Hello#3 ... We need to keep the oldest hellos and show the first one.
var count = 1;
$(".button").click(function(){
count += 1;
num = parseInt($(".object span").text());
$(".object span").text(count);
var cont = $(".container"),
div = cont.find(".object").eq(0).clone();
cont.append(div);
});
.object{
width:100px;
height:20px;
background-color: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button type="button" class="button">
create object
</button>
<div class="container">
<div class="object">
<p>
hello#<span>1</span>
</p>
</div>
</div>

You just have to change a little:
var count = 1;
$(".button").click(function() {
count += 1;
num = parseInt($(".object span").text());
var cont = $(".container"),
div = cont.find(".object").eq(0).clone();
div.find('span').text(count); // <------here you have to put the count
cont.append(div);
});
.object {
width: 100px;
height: 20px;
background-color: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button type="button" class="button">
create object
</button>
<div class="container">
<div class="object">
<p>
hello#<span>1</span>
</p>
</div>
</div>
and if you want to simplify this more use this:
$(".button").click(function() {
var idx = ++$('.object').length; // check for length and increment it with ++
var cont = $(".container"),
div = cont.find(".object").eq(0).clone();
div.find('span').text(idx); // <------here you have to put the count
cont.append(div);
});
.object {
width: 100px;
height: 20px;
background-color: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button type="button" class="button">
create object
</button>
<div class="container">
<div class="object">
<p>
hello#<span>1</span>
</p>
</div>
</div>

Use the following function, this is more modular and you can use it to update the count if you remove one of the elements
function updateCount() {
$(".object").each(function(i,v) {
$(this).find("span").text(i+1);
});
}
$(".button").click(function() {
num = parseInt($(".object span").text());
var cont = $(".container"),
div = cont.find(".object").eq(0).clone();
cont.append(div);
updateCount();
});
.object {
width: 100px;
height: 20px;
background-color: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button type="button" class="button">
create object
</button>
<div class="container">
<div class="object">
<p>
hello#<span>1</span>
</p>
</div>
</div>