HTML + JS How to change/unchange text onclick - javascript

I would like to write a JS that changes text on a button when clicked (to 'SHOW'), but when another button is clicked then the previously clicked button will change its text from 'SHOW' to initial text (eg 'A')
Scenario:
1. click on button A -> 'A' changes to 'SHOW'
2. click on button B -> 'B' changes to 'SHOW' but also 'SHOW'(from button A) changes back to 'A'
<button id="button1" value="A">A</button>
<button id="button2" value="B">B</button>
<button id="button3" value="C">C</button>
Above you will find example buttons i have in html file.
In JS file i have:
$("button1").on('click', function () {
$('.btn_click').removeClass('btn_click');//this is a css class that changes bg color
$(this).addClass('btn_click');
$(this).text('SHOW');
});
previously i used class selector not id one, but still could not accomplish what i wanted. The add and remove CSS works really ok

I think this is what you are looking for:
$("button").click(function() {
var clicked_button = $(this);
$("button").each(function() {
if($(this).is(clicked_button)) {
$(this).text('SHOW');
}
else {
$(this).text($(this).attr('value'))
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1" value="A">A</button>
<button id="button2" value="B">B</button>
<button id="button3" value="C">C</button>
Check working example here https://jsfiddle.net/prxd81vk/

You already have your solution, because when you add a class to the last pressed button, you can use it to change the text back:
$("button").on('click', function () {
$('.btn_click')
.text($('.btn_click').val())
.removeClass('btn_click');//this is a css class that changes bgcolor
$(this).addClass('btn_click');
$(this).text('SHOW');
});

You must use $("#button1") to properly select the button by id. This onClick is not actually associated to any of the buttons.

You need to keep track of the old text of the button and revert back to it when another button is pressed.
Example:
$("button").on('click', function () {
$('.btn_click').removeClass('btn_click');//this is a css class that changes bg color
$("[data-old-text]").each(function () {
$(this).text($(this).attr("data-old-text"));
$(this).removeAttr("data-old-text");
});
$(this).addClass('btn_click');
$(this).attr("data-old-text", $(this).text());
$(this).text('SHOW');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button1">A</button>
<button id="button2">B</button>
<button id="button3">C</button>

Use this :
Button 1 click :
$('#button1').click(function () {
$('#button1').text('Show');
});
Buttton 2 click :
$('#button2').click(function () {
$('#button2').text('show');
$('#button1').text('old value');
});

I would change targeting elements from id to class attribute.
<button class="button" value="A">A</button>
<button class="button" value="B">B</button>
<button class="button" value="C">C</button>
The script would then first clear the 'btn_click' class from any other buttons, and then apply the 'active' class to the button that was clicked.
$("button").on('click', function () {
$('.button').removeClass('btn_click');//this is a css class that changes bg color
$(this).addClass('btn_click');
$(this).text('SHOW');

To select element by ID you must use $("#button1").
Try like this:
$("#button1").on('click', function () {
$('.btn_click').removeClass('btn_click');//this is a css class that changes bg color
$(this).addClass('btn_click');
$(this).text('SHOW');
});
And after that add whatever you want to do with other two buttons (set A,B,C).

You can try this code..
<script>
$(document).ready(function()
{
$('#button1').click(function()
{
$('.btn_click').removeClass('btn_click');//this is a css class that changes bg color
$(this).addClass('btn_click');
$(this).text('Show');
$('#button2').text('B');
});
$('#button2').click(function()
{
$('#button1').text('A');
$(this).text('Show');
});
});
</script>

Related

Simulate click with javascript with no element ID

<button
type="button"
class="blue"
data-events="click:onAddNote"
data-events-target="cpoe-LabResultDetailView"
>
Add Note
</button>
I'm trying to simulate / prompt a click of this button when I press a shortcut key sequence. However, I haven't been successful with anything other than through the class "blue", which works but also activates something else. How do I target the "data-events" or "data-events-target"?
Is there a way to something similar to:
$("click:onAddNote").trigger("click");
You can use querySelector and select the button with its attributes
var button = document.querySelector('[data-events="click:onAddNote"]');
button.onclick = ()=>console.log('Clicked');
button.click()
<button
type="button"
class="blue"
data-events="click:onAddNote"
data-events-target="cpoe-LabResultDetailView"
>
Add Note
</button>
Why not just this?
const button = docuemnt.querySelector('button')
button.click()
There are many ways to select the <button> element.
Method-1
In the example below, the click event is fired by selecting the first <button> element with the .blue class style applied.
let button = document.getElementsByClassName('blue');
button[0].addEventListener('click', function() {
console.log("clicked");
});
<button type="button" class="blue">Add Note</button>
Method-2
The click event of the <button> element with the .blue class style applied using jQuery can be rendered as follows:
$(".blue").on('click', function(event) {
console.log("clicked");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="blue" data-events="click:onAddNote" data-events-target="cpoe-LabResultDetailView">Add Note</button>
Targeting the "data-events" attribute is simple, like this ...
$('button[data-events="click:onAddNote"]').on('click', function(){
console.log('clicked!');
});
<button
type="button"
class="blue"
data-events="click:onAddNote"
data-events-target="cpoe-LabResultDetailView"
>
Add Note
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
See the jquery documentation for more information on running handlers -- Here

How to add class to the clicked button and remove a class to the previously clicked button

How will I add a class to the clicked button and remove a class to the previously clicked button. I want to have a single active button only per click
My html looks like this
<div class="nav-button">
<button id="btn-all">All</button>
<button id="btn-chicken">Chicken</button>
<button id="btn-pizza">Pizza</button>
<button id="btn-pasta">Pasta</button>
<button id="btn-drinks">Drinks</button>
</div>
And my jquery looks like this
$('.nav-button button').on('click', function(){
$(this).addClass("active")
})
I dont want to select the buttons one by one because this group of button is dynamic. I just only use the html example above to show my buttons in html
You can simply first remove the class from all buttons:
$("div.nav-button button").removeClass('active');
So you can do:
$('.nav-button button').on('click', function(){
$("div.nav-button button").removeClass('active');
$(this).addClass("active");
})
.active {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-button">
<button id="btn-all">All</button>
<button id="btn-chicken">Chicken</button>
<button id="btn-pizza">Pizza</button>
<button id="btn-pasta">Pasta</button>
<button id="btn-drinks">Drinks</button>
</div>

Get the added class from body and do somthing

I have two button when i click one one of them class "active-1" add to body
and another button, class "active-2" add to body.
When i want to get one of this class, don't work.
I use this code to get class "active-2":
if ( $("body.active-1").hasClass("active-2") ) {
// Do Somtihng
}
what is the problem and what is the expected behaviour?
try this,
$(document).ready(function(){
$('.button').click(function(){
console.log($(this).attr('id') + ' class added');
$('body').removeAttr('class').addClass($(this).attr('id'));
});
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button class="button" id="active-1">active-1 add</button>
<button class="button" id="active-2">active-2 add</button>

jquery button value change with efffects

I want to change the button's value with fading effect when i click on it. My code is:
html:
<button> some value </button>
script:
$(document).ready(function(){
$("#btn_1").click(function (){
$(this).prop('value', "new value!"); // line1
});
});
From another stackoverflow answer, I found that if i replace line1 with $(this).find('span').html('Collapse').hide().fadeIn('slow');
and change the html part to <button> <span> some value </span> </button> it works. However, is there a way to achieve the transition effect using jquery without using span tags ?
Do you want something like this?
just use $(this).text('new value!').hide().fadeIn('slow');
$(document).ready(function() {
$("#btn_1").click(function() {
$(this).text('new value!').hide().fadeIn('slow');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn_1"> some value </button>
You can set text property of button. and you can fadeOut and fadeIn
$(document).ready(function(){
$("#btn_1").click(function (){
$(this).text("You Clicked").fadeOut().fadeIn();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn_1">Click HERE</button>

Button show div without deleting the previous div

So,I have 8 buttons. Each one shows a div when it's pressed.The problem is that when I press multiple buttons , all of them show their divs and don't delete the previous ones. What can I do?
Html:
<button id ="btn1" >a</button>
<button id ="btn2">b</button>
<button id ="btn3">c</button>
<button id ="btn4">d3</button>
<button id ="btn5">e 4</button>
<button id ="btn6">f 5</button>
<button id ="btn7">g 6</button>
<button id ="btn8">h 7</button>
<div id="story">asdaasdasdasdadsasdsds</div>
<div id = "z2">asdaasdadsd</div>
<div id = "z3">asdasdasdad</div>
<div id = "z4">asdasdasdad</div>
<div id = "z5">asdasdasdad</div>
<div id = "z6">asdadsdaad</div>
<div id = "z7">asdads</div>
CSS:
#z1,
#z2,
#z3,
# z4,
#z5,
#z6,
#z7
{ display: none; }
JQuery:
$(function() {
$('#btn1').on('click', function() {
$('#story').fadeToggle(400);
});
$('#btn2').on('click', function() {
$('#z1').fadeToggle(700);
});
$('#btn3').on('click', function() {
$('#z2').fadeToggle(700);
});
$('#btn4').on('click', function() {
$('#z3').fadeToggle(700);
});
$('#btn5').on('click', function() {
$('#z4').fadeToggle(700);
});
$('#btn6').on('click', function() {
$('#z5').fadeToggle(700);
});
$('#btn7').on('click', function() {
$('#z6').fadeToggle(700);
});
$('#btn8').on('click', function() {
$('#z7').fadeToggle(700);
});
});
You can add a class to your div "divToHide" for instance and call
$('.divToHide').hide();
in your click method
here is a fiddle :http://jsfiddle.net/U5PEu/1/
You by the way have an extra space into you css between # and z4
You're not hiding the others because you're not doing anything with them. Try changing all of your on click handlers to be like this:
$('#btn1').on('click', function() {
// hides currently shown divs
$('.visible').removeClass('visible').fadeOut(700);
// shows div in question, and adds a class that can be queried later
$('#story').addClass('visible').fadeIn(400);
});
The "visible" class that is added can be used to collect and remove any visible divs (or any element, really), regardless of what showed them.

Categories

Resources