We Keep Coding

How to add dynamic class to multiple dynamic button on click of another button?

I am developing a nuxt.js web application, I have one static button, and multiple dynamic button, on clicking the static button I want to add class to each dynamic button.
With the code below I am able to add class to the button, but it is only working on first button, on remaining button class are getting added dynamically.
<button #click="scrollToDiv()" class="btn btn-block btn-primary py-2 text-center rounded" style="background: #1f7ae0; border: #1f7ae0;">
below is the multiple dynamic button
<button id="enroll" class="btn btn-primary btn-block text-center rounded" style="background: #2685ef;border: 2px solid #2685ef;">Buy Now</button>
<button id="enroll" class="btn btn-primary btn-block text-center rounded" style="background: #2685ef;border: 2px solid #2685ef;">Buy Now</button>
<button id="enroll" class="btn btn-primary btn-block text-center rounded" style="background: #2685ef;border: 2px solid #2685ef;">Buy Now</button>
Below is the script
scrollToDiv() {
document.getElementById('pricing').scrollIntoView({
behavior: 'smooth',
})
var enroll = document.getElementById('enroll')
enroll.classList.add('glow')
var scrollTimeout
clearTimeout(scrollTimeout)
scrollTimeout = setTimeout(function () {
enroll.classList.remove('glow')
}, 2000)
}
I want to add dynamic CSS to each dynamic button on click of static button
.glow {
color: #fff;
background: linear-gradient(40deg, #2031ffa1, #05ff75cf) !important;
border-radius: 12px !important;
box-shadow: 5px 5px #ff922e !important;
}

As you used nuxt.js, i suppose vue.js solution.
append toggle value in data part
data () {
return {
...
glow: false,
...
}
}
Add class binding in each dynamic buttons. :class="{ glow }" attributes bind class name glow when glow data is true.
<button id="enroll" class="btn btn-primary btn-block text-center rounded" :class="{glow}" style="background: #2685ef;border: 2px solid #2685ef;">Buy Now</button>
<button id="enroll" class="btn btn-primary btn-block text-center rounded" :class="{glow}" style="background: #2685ef;border: 2px solid #2685ef;">Buy Now</button>
<button id="enroll" class="btn btn-primary btn-block text-center rounded" :class="{glow}" style="background: #2685ef;border: 2px solid #2685ef;">Buy Now</button>
Control just glow data. It affect each button's class name.
scrollToDiv() {
this.glow = true
setTimeout(() => {
this.glow = false
}, 2000)
}
Set timeout id in data (like global variable in component). In your original code, timeout id scrollTimeout is local variable in scrollToDiv, clearTimeout is meaningless. Each execution of scrollToDiv generates new scrollTimenout in function scope.
data () {
return {
...
glow: false,
timer: null,
...
}
},
...
methods: {
...
scrollToDiv() {
this.glow = true
clearTimeout(this.timer)
this.timer = setTimeout(() => {
this.glow = false
}, 2000)
}
}
...

The id of an element is supposed to be unique, so when you use getElementById you are only getting the first matching element.
I would try giving the three buttons the same class, and use getElementsByClassName(className), that will return you an HTMLCollection that will allow you to iterate through the elements. So something like:
scrollToDiv() {
document.getElementById('pricing').scrollIntoView({
behavior: 'smooth',
})
var elements = document.getElementsByClassName('example-classname')
for(let e of elements) e.classList.add('glow')
var scrollTimeout
clearTimeout(scrollTimeout)
scrollTimeout = setTimeout(function () {
for(let e of elements) e.classList.remove('glow')
}, 2000)
}

How to display a Save icon button on an inline text editing placeholder

How to add a save button something like this
<a class="btn btn-xs btn-default" href="#" ><i class="fa fa-check"></i></a>
on an inline text edit filed.
I want to add above textbox just to the right side of the input filed so that onclick of it, it will save the texts to the span.
Also is it possible the icon will visible on-mouse hover to .editableTextbox?
$(function() {
$(".editableTextbox").each(function() {
var t = $(this);
t.after("<input type = 'text' style = 'display:none' />");
var i = $(this).next();
i[0].name = this.id.replace("lbl", "txt"), i.val(t.html()), t.click(function() {
$(this).hide(), $(this).next().show()
}), i.focusout(function() {
$(this).hide(), $(this).prev().html($(this).val()), $(this).prev().show()
})
})
});
.editableTextbox{padding: 2px; border:1px solid #CCC;}
.hiddencontrol{
display: none;
}
.showcontrol:hover .hiddencontrol{
display : block;
}
.editableTextbox:hover {cursor: pointer; background-color: #D9EDF8; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="editableTextbox"> Rename me </span>

You can use .append() method to insert the specified content as the last child of each element.
$(function() {
$(".editableTextbox").each(function() {
var t = $(this);
t.after("<input type = 'text' style = 'display:none' />");
var i = $(this).next();
i[0].name = this.id.replace("lbl", "txt"), i.val(t.html()), t.click(function() {
$(this).hide(), $(this).next().show()
}), i.focusout(function() {
$(this).hide(), $(this).prev().html($(this).val()), $(this).prev().show()
$(".editableTextbox").append("<a class='btn btn-xs btn-default' href='#'><i class='fa fa-check'></i></a>");
})
})
});
.editableTextbox {
padding: 2px;
border: 1px solid #CCC;
}
.hiddencontrol {
display: none;
}
.showcontrol:hover .hiddencontrol {
display: block;
}
.editableTextbox:hover {
cursor: pointer;
background-color: #D9EDF8;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<span class="editableTextbox"> Rename me </span>

JavaScript functions help needed

I'm practicing JavaScript and have come up with a little project ... get the diameters of various bodies in our solar system when I click on corresponding buttons.
I've been able to do this, but not very efficiently. Currently, the only way my code works is with 11 functions. I also have two objects (one for the body names and the other for the body diameters).
Any feedback to make my code more efficient is very welcome. Thank you! :-)
//JavaScript
var bodyName = {
su:"the Sun",
me:"Mercury",
ve:"Venus",
ea:"Earth",
mo:"the Moon",
ma:"Mars",
ju:"Jupiter",
sa:"Saturn",
ur:"Uranus",
ne:"Neptune",
pl:"Pluto"
};
var bodyDiam = {
su:864576,
me:3032,
ve:7521,
ea:7918,
mo:2159,
ma:4212,
ju:86881,
sa:72367,
ur:31518,
ne:30599,
pl:1475
};
function suInfo() {
document.getElementById("bodyNameDisplay").innerHTML = bodyName.su;
document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.su;
}
function meInfo() {
document.getElementById("bodyNameDisplay").innerHTML = bodyName.me;
document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.me;
}
function veInfo() {
document.getElementById("bodyNameDisplay").innerHTML = bodyName.ve;
document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.ve;
}
function eaInfo() {
document.getElementById("bodyNameDisplay").innerHTML = bodyName.ea;
document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.ea;
}
function moInfo() {
document.getElementById("bodyNameDisplay").innerHTML = bodyName.mo;
document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.mo;
}
function maInfo() {
document.getElementById("bodyNameDisplay").innerHTML = bodyName.ma;
document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.ma;
}
function juInfo() {
document.getElementById("bodyNameDisplay").innerHTML = bodyName.ju;
document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.ju;
}
function saInfo() {
document.getElementById("bodyNameDisplay").innerHTML = bodyName.sa;
document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.sa;
}
function urInfo() {
document.getElementById("bodyNameDisplay").innerHTML = bodyName.ur;
document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.ur;
}
function neInfo() {
document.getElementById("bodyNameDisplay").innerHTML = bodyName.ne;
document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.ne;
}
function plInfo() {
document.getElementById("bodyNameDisplay").innerHTML = bodyName.pl;
document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.pl;
}
<!--CSS-->
p {
font-family: arial, sans-serif;
font-size: 1em;
}
.button {
font-size: 1em;
font-weight: bold;
color: #fff;
border: none;
border-radius: 0;
padding: 0.5em;
margin: 0 0.25em 0.5em 0;
background-color: #393;
}
.result {
font-weight: bold;
color: #e80;
}
<!--html-->
<!--buttons-->
<button type="button" class="button" id="suButton" onclick="suInfo()">Sun</button>
<button type="button" class="button" id="meButton" onclick="meInfo()">Mercury</button>
<button type="button" class="button" id="veButton" onclick="veInfo()">Venus</button>
<button type="button" class="button" id="eaButton" onclick="eaInfo()">Earth</button>
<button type="button" class="button" id="moButton" onclick="moInfo()">Moon</button>
<button type="button" class="button" id="maButton" onclick="maInfo()">Mars</button>
<button type="button" class="button" id="juButton" onclick="juInfo()">Jupiter</button>
<button type="button" class="button" id="saButton" onclick="saInfo()">Saturn</button>
<button type="button" class="button" id="urButton" onclick="urInfo()">Uranus</button>
<button type="button" class="button" id="neButton" onclick="neInfo()">Neptune</button>
<button type="button" class="button" id="plButton" onclick="plInfo()">Pluto</button>
<!--Information Display-->
<p>The diameter of <span class="result" id="bodyNameDisplay">this body</span> is <span class="result" id="bodyDiamDisplay">this many</span> miles.</p>

Instead of using seperate functions for each button, you can pass an argument to the functions
function info(planet) {
document.getElementById("bodyNameDisplay").innerText = bodyName[planet];
document.getElementById("bodyDiamDisplay").innerText = bodyDiam[planet];
}
Then in the button, you can pass the argument onclick
<button type="button" class="button" id="plButton" onclick="info('pl')">Pluto</button>
If you also want to generate the buttons automatically, you can use javascript for that as well:
html:
<div id="buttons"></div>
js:
var buttonsContainer = document.body.getElementById("buttons");
for(var planetId in bodyName){ // Loop over every planet
var button = document.createElement("button"); // Creates <button></button>
button.setAttribute("onclick", "info('"+planetId+"')") // Add onclick=info('id');
button.innerText = bodyName[planetId] // Add the text inside <button>PlanetName</button>
button.classList.add("button"); // Add the class="button" class
button.setAttribute("id", planetId+"Button"); // Add the id="idButton"
button.setAttribute("type", "button"); // Add the type="button"
buttonsContainer.appendChild(button); // Add the button to the div of buttons
}
Example:
//JavaScript
var bodyName = {
su:"the Sun",
me:"Mercury",
ve:"Venus",
ea:"Earth",
mo:"the Moon",
ma:"Mars",
ju:"Jupiter",
sa:"Saturn",
ur:"Uranus",
ne:"Neptune",
pl:"Pluto"
};
var bodyDiam = {
su:864576,
me:3032,
ve:7521,
ea:7918,
mo:2159,
ma:4212,
ju:86881,
sa:72367,
ur:31518,
ne:30599,
pl:1475
};
function info(planet) {
document.getElementById("bodyNameDisplay").innerText = bodyName[planet];
document.getElementById("bodyDiamDisplay").innerText = bodyDiam[planet];
}
var buttonsContainer = document.getElementById("buttons");
for(var planetId in bodyName){ // Loop over every planet
var button = document.createElement("button"); // Creates <button></button>
button.setAttribute("onclick", "info('"+planetId+"')") // Add onclick=info(id);
button.innerText = bodyName[planetId] // Add the text inside <button>PlanetName</button>
button.classList.add("button"); // Add the class="button" class
button.setAttribute("id", planetId+"Button"); // Add the id="idButton"
button.setAttribute("type", "button"); // Add the type="button"
buttonsContainer.appendChild(button); // Add the button to the div of buttions
}
p {
font-family: arial, sans-serif;
font-size: 1em;
}
.button {
font-size: 1em;
font-weight: bold;
color: #fff;
border: none;
border-radius: 0;
padding: 0.5em;
margin: 0 0.25em 0.5em 0;
background-color: #393;
}
.result {
font-weight: bold;
color: #e80;
}
<!--html-->
<!--buttons-->
<div id="buttons"></div>
<!--Information Display-->
<p>The diameter of <span class="result" id="bodyNameDisplay">this body</span> is <span class="result" id="bodyDiamDisplay">this many</span> miles.</p>

You can pass the planet identifier as an argument to the info() function:
function info(id) {
document.getElementById("bodyNameDisplay").innerHTML = bodyName[id];
document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam[id];
}
This way one function is enough.
The HTML:
<button type="button" class="button" id="suButton" onclick="info('su')">Sun</button>

Convert the two sets of details into one array of objects that contain the details for that body.This way you can access all the information in a single function and simply pass a variable to the function that will access the index of the object within the array and return the name and diameter from a single object.
//JavaScript
var bodies = [
{name:"the Sun", "diameter": 864576},
{name:"Mercury", diameter: 3032},
{name:"Venus", diameter: 7521},
{name:"Earth", diameter: 7918},
{name:"the Moon", diameter: 2159},
{name:"Mars", diameter: 4212},
{name:"Jupiter", diameter: 86881},
{name:"Saturn", diameter: 72367},
{name:"Uranus", diameter: 31518},
{name:"Neptune", diameter: 30599},
{name:"Pluto", diameter: 1475},
];
function setInfo(index) {
document.getElementById("bodyNameDisplay").innerHTML = bodies[index].name;
document.getElementById("bodyDiamDisplay").innerHTML = bodies[index].diameter;
}
<!--CSS-->
p {
font-family: arial, sans-serif;
font-size: 1em;
}
.button {
font-size: 1em;
font-weight: bold;
color: #fff;
border: none;
border-radius: 0;
padding: 0.5em;
margin: 0 0.25em 0.5em 0;
background-color: #393;
cursor: pointer;
}
.result {
font-weight: bold;
color: #e80;
}
<!--html-->
<!--buttons-->
<button type="button" class="button" onclick="setInfo(0)">Sun</button>
<button type="button" class="button" onclick="setInfo(1)">Mercury</button>
<button type="button" class="button" onclick="setInfo(2)">Venus</button>
<button type="button" class="button" onclick="setInfo(3)">Earth</button>
<button type="button" class="button" onclick="setInfo(4)">Moon</button>
<button type="button" class="button" onclick="setInfo(5)">Mars</button>
<button type="button" class="button" onclick="setInfo(6)">Jupiter</button>
<button type="button" class="button" onclick="setInfo(7)">Saturn</button>
<button type="button" class="button" onclick="setInfo(8)">Uranus</button>
<button type="button" class="button" onclick="setInfo(9)">Neptune</button>
<button type="button" class="button" onclick="setInfo(10)">Pluto</button>
<!--Information Display-->
<p>The diameter of <span class="result" id="bodyNameDisplay">this body</span> is <span class="result" id="bodyDiamDisplay">this many</span> miles.</p>

Apply css-background for each element depending on parent's data attribute

I am making a rating bar with an element that has a data-rating attribute and it's children with 5 buttons. How can I change background-image of buttons depending on the data-rating attribute? For example if data-rating="3" - select first 3 buttons and change their background.
This is my code:
var rating = $('#video-list .children .branch-opened .rating');
rating.each(function() {
var value = $(this).data('rating');
var button = $(this).find('button');
});
HTML:
<div class="rating" data-rating="4">
<button value="1"></button>
<button value="2"></button>
<button value="3"></button>
<button value="4"></button>
<button value="5"></button>
</div>
Many thanks!

You could try the following (add to your rating.each callback function):
for (let i = 0; i < value; ++i) {
$(button[i]).css('background-color', '#abc');
}
Edit:
Has to be $(button[i]) instead of just button[i]

This simple code will work for you.
Updated Code
var rating = $('.rating');
rating.each(function() {
var rValue = $(this).data('rating');
$(this).find('button').slice(0, rValue).addClass('black');
});
.black {
background-color: black;
}
.rating button {
width: 10%;
display: inline-block;
padding: 20px;
border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating" data-rating="4">
<button value="1"></button>
<button value="2"></button>
<button value="3"></button>
<button value="4"></button>
<button value="5"></button>
</div>

Use .each if you're already using jQuery:
var rating = $('.rating').data('rating');
$('.rating .item').slice(0,rating).each(function(index, value) {
$(this).toggleClass('highlighted');
});
.rating {
display: flex;
}
.item {
flex: 1;
padding: 10px;
background-color: #eee;
}
.item.highlighted {
background-color: goldenrod;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating" data-rating="4">
<button class="item" value="1"></button>
<button class="item" value="2"></button>
<button class="item" value="3"></button>
<button class="item" value="4"></button>
<button class="item" value="5"></button>
</div>

store the rating value and loop through the buttons and check condition if index lesser than rating value then add highlight class on the buttons.
var ratingValue = $('.rating').data('rating');
$('.rating .item').each(function (index, value) {
if ( index < ratingValue ) {
$(this).toggleClass('highlighted')
}
});
.rating {
display: flex;
flex-direction: column
}
.item {
flex: 1;
padding: 10px;
background-color: #eee;
}
.item.highlighted {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating" data-rating="3">
<button class="item" value="1"></button>
<button class="item" value="2"></button>
<button class="item" value="3"></button>
<button class="item" value="4"></button>
<button class="item" value="5"></button>
</div>

Remove a class which is not recognized by DOM

I am working on a interactive map, which triggers an overlay image (which highlights the selected area)
But now I add classes to an div and I want to delete them if I highlight an other area. First I tried the starts with indicator to remove classes which starts with hl- this is my js file:
$('.btn-pointer').click(function() {
$('.highlight-layer').removeClass('[class^="hl-"]');
});
$('.btn-sp').click(function() {
$('.highlight-layer').addClass('hl-sp');
$('.popover').not(this).popover('hide');
});
$('.btn-vp').click(function() {
$('.highlight-layer').addClass('hl-vp');
$('.popover').not(this).popover('hide');
});
$('.btn-sl').click(function() {
$('.highlight-layer').addClass('hl-sl');
$('.popover').not(this).popover('hide');
});
$('.btn-ec').click(function() {
$('.highlight-layer').addClass('hl-ec');
$('.popover').not(this).popover('hide');
});
And here is the html:
<div>
<img src="../img/map/map-full.jpg" alt="">
<button class="btn btn-sp btn-pointer" data-container="body" data-toggle="popover" data-placement="top" data-content="<h2>Safaripark</h2>">Safaripark</button>
<button class="btn btn-vp btn-pointer" data-container="body" data-toggle="popover" data-placement="top" data-content="<h2>Vakantiepark</h2>">Vakantiepark</button>
<button class="btn btn-sl btn-pointer" data-container="body" data-toggle="popover" data-placement="top" data-content="<h2>Speelland</h2>">Speelland</button>
<button class="btn btn-ec btn-pointer" data-container="body" data-toggle="popover" data-placement="top" data-content="<h2>Event Center</h2>">Event Center</button>
<div class="highlight-layer hl-ec"></div>
</div>
I tried to create a Fiddle but never added external Resources so the error it gives me is the following: Uncaught Error: Bootstrap's JavaScript requires jQuery

You could use the callback for removeClass to filter out the classes you want to remove based on a starting string etc
$('.highlight-layer').removeClass(function(i, klass) {
var remove = 'hl-';
return klass.split(/\s/).filter(function(k) {
return k.indexOf(remove) === 0;
}).join(' ');
});

removeClass doesn't accept a selector, it accepts a space-delimited series of classes to remove. So just list the ones you want to remove:
$('.highlight-layer').removeClass('hl-sp hl-vp hl-sl hl-ec');
It's fine if one (or indeed all) of them aren't on any given element; the one(s) that is/are will be removed.
Example:
$("input[type=button]").on("click", function() {
$(".highlight-layer").removeClass("hl-sp hl-vp hl-sl hl-ec");
});
.hl-sp {
color: red;
}
.hl-vp {
color: green;
}
.hl-sl {
color: blue;
}
.hl-ec {
color: grey;
}
<div>
<input type="button" value="Remove">
<div class="highlight-layer hl-sp">Starts out with hl-sp</div>
<div class="highlight-layer hl-vp">Starts out with hl-vp</div>
<div class="highlight-layer hl-sl">Starts out with hl-sl</div>
<div class="highlight-layer hl-ec">Starts out with hl-ec</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Working Fiddle.
You have just to change one line in your code and it will works check the code below that remove all the classes and keep just the essential one highlight-layer :
$('.btn-pointer').click(function() {
$('.highlight-layer').removeClass().addClass('highlight-layer');
});
Like this the element classes are always two highlight-layer and clicker button class.
Hope this helps.

You can add extension to jQuery which would loop through elements returned from selector and remove list.
Following is a basic example:
JSFiddle.
$.fn.removeClasses = function(regex) {
Array.prototype.forEach.call(this, function(el) {
var class_list = el.classList;
var filtered_list = Array.prototype.filter.call(class_list, function(c) {
return regex.test(c);
});
console.log(filtered_list);
$(el).removeClass(filtered_list.join(" "))
});
}
$(".foo").on("click", function() {
var reg = /^test/;
$(this).removeClasses(reg);
});
.test {
background: #333;
}
.test1 {
color: #fff;
}
.test2 {
border: 1px solid gray;
}
.test3 {
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="test test1 test2 test3 foo">
Test
</div>