We Keep Coding

Change the outcome of a variable based on a button push to match a different button

I have a button with an id that sets a global variable like this:
<div class="mybuttons"
<button id="mapOne" data-toggle="modal" data-target="#map-1-scene-1">Scene</button>
<button class="no-click-span" id="mapOneCurrent" data-toggle="modal" data-target="#map-1-scene-1"><i class="fas fa-charging-station fa2x"></i> Current</button>
</div>
Then in JS:
var mapNumber;
const mybuttons = document.querySelectorAll('.mybuttons button');
mybuttons.forEach(mybutton => {
mybutton.addEventListener('click', processClick);
});
function processClick() {
window.mapNumber = this.id; // the id of the clicked button
}
The second button in the div with the id #mapOneCurrent just reopens the modal without refreshing the data.
What I would like to happen, is if the second button is pushed (eg #mapOneCurrent) that the variable mapNumber just remains as mapOne (without the word "Current" at the end of it). So it would almost be as if the other button had been pushed.
Is this possible to do in this type of scenario?

This should do what you want:
var mapNumber;
const mybuttons = [...document.querySelectorAll('.mybuttons button')];
mybuttons.forEach(mybutton=>{
mybutton.addEventListener('click',function() {
window.mapNumber = this.id.replace("Current",""); // the id of the clicked button
console.log(mapNumber);
});
})
<div class="mybuttons">
<button id="mapOne" data-toggle="modal" data-target="#map-1-scene-1">Scene</button>
<button class="no-click-span" id="mapOneCurrent" data-toggle="modal" data-target="#map-1-scene-1"><i class="fas fa-charging-station fa2x"></i>Current</button>
</div>
However, you could simplify it by using "delegated event listening" to:
var mapNumber;
document.querySelector('.mybuttons').addEventListener('click',function(ev){
if (ev.target.tagName==="BUTTON") {
window.mapNumber = ev.target.id.replace("Current","");
console.log(mapNumber);
}
})
<div class="mybuttons">
<button id="mapOne" data-toggle="modal" data-target="#map-1-scene-1">Scene</button>
<button class="no-click-span" id="mapOneCurrent" data-toggle="modal" data-target="#map-1-scene-1"><i class="fas fa-charging-station fa2x"></i>Current</button>
</div>
In this snippet the event is listening to clicks on the wrapper container .mybuttobs but will trigger actions only if an inside BUTTON was clicked.

How to capture two same id but different class in addEventListener

first of all, thank you for your time to read this question, and two things, I'm using ES5 and I don't use jQuery.
Right now I'm struggling a lot to figure what's the correct solution for the addEventListener, because for some reason it does not trigger for the second button which is only for the mobile screen dimensions, the problem is that the second button have the same id but different class, for example this:
<div class="product-bg-container product-general-info variation-info">
<input type="hidden" name="sku" value="Something-15892290" id="selected-option">
{/* Desktop screen button */}
<button id="buy-now" class="btn btn-lg hidden-sm-down btn-primary">
Add to Cart
</button>
{/* Mobile screen button */}
<button id="buy-now" class="btn btn-lg hidden-md-up btn-primary">
Add to Cart
</button>
</div>
Where I am trying to trigger the second button but it does not where I don't understand why it does, if the id is the same, should not matter, so I'm trying to figure how to trigger from the first button if it's clicked and also with the second if it's clicked, but I'm out of ideas...
var button = document.getElementById('buy-now');
if (!button) {
return;
}
button.addEventListener('click', function trackAddToCart() {
// more code for the event
}
I thought an idea to capture the attribute of the button, but it works in the first button but not for the second one:
var button = document.getElementById('buy-now');
var att = button.getAttribute('class');
button.addEventListener('click', function() {
console.log('class ' + att); //shows: class: btn btn-lg hidden-sm-down btn-primary
console.log('button class? '+ button); //shows: button element: [object HTMLButtonElement]
});
But when I click the second button... does not trigger or happening nothing, not sure why... and I can't change the id value (which it should be easy but I can't "company standard")
Can anyone help me to have an idea how to capture and trigger the event for the second button ??

The attribute id must be unique in a document. You can use attributeStartsWith selector or class with querySelectorAll(). Then loop through all the button to attach the event (click) individually:
//var button = document.querySelectorAll('.btn.btn-primary');
var button = document.querySelectorAll('[id^=buy-now]');
button.forEach(function(btn){
btn.addEventListener('click', function() {
console.log('class ' + this.classList);
console.log('button class? '+ this.id);
});
});
<div class="product-bg-container product-general-info variation-info">
<input type="hidden" name="sku" value="Something-15892290" id="selected-option">
<button id="buy-now" class="btn btn-lg hidden-sm-down btn-primary">
Add to Cart
</button>
<button id="buy-now2" class="btn btn-lg hidden-md-up btn-primary">
Add to Cart
</button>
</div>

nextElementSibling seems working in this case.
var btn1 = document.getElementById("btn");
var btn2 = btn1.nextElementSibling;
btn1.addEventListener("click",function(e){
console.log("btn1");
});
btn2.addEventListener("click",function(e){
console.log("btn2");
});
<div>
<button id="btn" class="btn1">butotn 1</button>
<button id="btn" class="btn2">butotn 2</button>
</div>

Bootstrap change button value

I'm having trouble changing a button value in bootstrap. I can change it using jQuery, but i'm changing it from a modal dialog. I looked elsewhere on SO but I couldn't find anything that seemed to match my specific issue?
Steps:
Click button. Change button text on main html form. Upon clicking the
button it changes the text, closes the modal, and then immediately
the text changes back to what it was originally. It should just change the text and stay that way, obviously.
$("#validate-rv-button").click(function () {
$("#review-history-validate").val("Review History");
});
HTML
<input id="review-history-validate" type="button" class="rvButtons btn btn-outline-warning btn-sm" data-toggle="modal" data-target="#review-history" value="Validate" />
Any help would be much appreciated.

Another way to do it with <button></button>
<button id="review-history-validate" type="button" class="rvButtons btn btn-outline-warning btn-sm" data-toggle="modal" data-target="#review-history" />Validate</button>
in jquery:
$("#validate-rv-button").click(function () {
$("#review-history-validate").text("Review History");
});

I believe you got the naming wrong.
This works:
$("#review-history-validate").click(function () {
document.getElementById("review-history-validate").value = "My value";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="review-history-validate" type="button" class="rvButtons btn btn-outline-warning btn-sm" data-toggle="modal" data-target="#review-history" value="elo" />
Or jQuery only as your question:
$("#review-history-validate").click(function () {
$("#review-history-validate").val("My value");
});

Aurelia.js change button color or class after click

Aurelia.js Changing button color or class after click.
How can do this with Aurelia? change from primary to danger after click on this button?
thank you.
html:
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-danger">Danger</button>

You need to set a class binding and a click binding.
Bindings:
http://aurelia.io/hub.html#/doc/article/aurelia/binding/latest/binding-basics
Basic example:
//view.html
<button type="button" class="btn ${clicked ? 'btn-danger' : 'btn-primary'}" click.trigger="handleClick()">Click</button>
//view.js
...
clicked = false;
handleClick(){
this.clicked = !this.clicked; // toggle clicked true/false
return true; // only needed if you want to cancel preventDefault()
}
If you want, you can get a similar result by binding the style directly.

How to change button in twitter bootstrap using jquery

I have a button:
<button
class="btn btn-animated btn-default ban-user-btn"
id="btn-ban-username" // the username is generated by twig
data-nick="username" // the username is generated by twig
data-toggle="modal"
data-target="#statusModal"
>
Ban user
<i class="fa fa-ban"></i>
</button>
I need to change the button class from "btn-default ban-user-btn" to "btn-success unlock-user-btn".
When I do following in my javascript:
var button = $('#btn-ban-username);
button.addClass("btn-default");
button.addClass("ban-user-btn");
button.removeClass("btn-success");
button.removeClass("unlock-user-btn");
button.attr('id', 'btn-unlock-'+nick);
button.html("Unlock user <i class='fa fa-check'></i>");
I get the following:
<button
class="btn btn-animated btn-default ban-user-btn"
id="btn-unlock-username"
data-nick="username"
data-toggle="modal"
data-target="#statusModal"
>
Unlock user
<i class="fa fa-check"></i>
</button>
As you can see, the ID changes and the button content changes. The classes however do not.
Some ideas?
Cheers

You're adding classes that the button has and removing classes that the button doesn't have.
Try this:
$("#btn-ban-username")
.addClass("btn-success unlock-user-btn")
.removeClass("btn-default ban-user-btn");

In your JavaScript code you have to reverse the order of your addClass and removeClass. addclass function is used to add class to your html control and removeclass for removing class from an html contol.
You have to do this
var button = $('#btn-ban-username');
button.removeClass("btn-default");
button.removeClass("ban-user-btn");
button.addClass("btn-success");
button.addClass("unlock-user-btn");
button.attr('id', 'btn-unlock-dev');
button.html("Unlock user <i class='fa fa-check'></i>");