I have multiple HTML buttons with the same class="preis".
<button class="preis" value="4,50">4,50€</button>
<button class="preis" value="5,50">5,50€</button>
<button class="preis" value="3,00">3,00€</button>
I want to output the value of the exact button I clicked in the console.log. I've tried this so far:
function output() {
console.log(price.value);
}
var price = document.getElementsByClassName("preis");
price.addEventListener("click", output, true);
and I want to avoid using different IDs for each button if thats possible.
You can use forEach with querySelectorAll
function output() {
console.log(this.value);
}
var price = document.querySelectorAll(".preis");
price.forEach(el =>{
el.addEventListener("click", output, true);
});
<button class="preis" value="4,50">4,50€</button>
<button class="preis" value="5,50">5,50€</button>
<button class="preis" value="3,00">3,00€</button>
Reference:
-Array.prototype.forEach()
-Document.querySelectorAll()
Related
I want to increment a button value on a button click which I will later need to submit to my database.
I'm currently doing it like shown below but when I click the button the incremented values shows and the button text "GOAL" disappears.
How can i make it so that when the button is clicked it would change the button name to the incremented value instead of A. Taking away the buttons name or B: Having to use an input field to display the result
I would like it to display like this:
GOAL then GOAL etc etc
(1) (2)
the html
<button type="button" id ="button1" class="btn btn-lg btn-primary">GOAL</button>
the jquery
$('#button1').click(function() {
$('#button1').html(function(i, val) { return (val*1+1) });
});
I don't quite undertand you but if you want to keep goal string and increment clicks after it here's a solution:
(function(){
var goalStr = 'GOAL ';
// You can read it from the button as well
// var goalStr = $('#button1').text();
var i = 0;
$('#button1').click(function() {
i++;
$(this).text(goalStr+i);
});
})();
I wrote something like this:
let v;
let firstTime = true;
$('#button1').click(function()
{
if (firstTime) {
v = 1;
firstTime = false;
} else {
v++;
}
$(this).html(v);
});
Maybe you can just add a span element in this button and change the span's content when user clicks the button.
html
<button type="button" id ="button1" class="btn btn-lg btn-primary">
GOAL<br>(<span>1</span>)
</button>
jQuery:
$('#button1').click(function() {
$('#button1 span').html(function(i, val) { return (val*1+1) });
});
simply add text to the HTML of the button like this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<button type="button" id ="button1" class="btn btn-lg btn-primary"><span class="btn-text">GOAL</span><div class="btn-value"></div></button>
<script>
$('#button1').click(function() {
$('#button1').find('.btn-value').html(function(i, val) {return (val*1+1); });
});
</script>
</body>
</html>
I have several buttons belonging to the same class. I want to retrieve the value of the button I click on.
Here is my code:
var battons = document.getElementsByClassName("converting_video");
var number_of_buttons = battons.length;
function actual_url() {
while (number_of_buttons > 0) {
for (i = 1; i <= number_of_buttons; i++) {
function getting_url() {
battons[i].addEventListener("click", video_url)
}
function video_url(url) {
alert(url);
}
}
}
}
var battons = document.getElementsByClassName("class_btns");
var number_of_buttons = battons.length;
function actual_url() {
while (number_of_buttons > 0) {
for (i = 1; i <= number_of_buttons; i++) {
function getting_url() {
battons[i].addEventListener("click", video_url)
}
function video_url(url) {
alert(url);
}
}
}
}
<button class="class_btns" value='1'> results </button>
<button class="class_btns" value='2'> results </button>
<button class="class_btns" value='3'> results </button>
<button class="class_btns" value='4'> results </button>
This will allow you to get the value of any of the buttons clicked. Using jQuery's .click() event handler and $(this).val() will allow the value of the clicked button to be the value in the alert. Not sure what you are actually looking for with video_url etc, but this should point you in the right direction. You can then use the value from the click to do pass to your function rather than jusrt alerting i eg: ... video_url(btnVal) ...
$(document).ready(function(){
$('.class_btns').click(function(){
var btnVal = $(this).val();
alert(btnVal);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="class_btns" value='1'>results</button>
<button class="class_btns" value='2'>results</button>
<button class="class_btns" value='3'>results</button>
<button class="class_btns" value='4'>results</button>
I have a situation over here. I'm writing this situation in a chronology.
Assume that there are an input[type=number] and a button.
When the button is clicked, it will change the attribute value (data-oldval="") to the current value of the input number.
The next time I click the button, it supposed to add the current value in the input with the number in the data-oldval attribute.
But the problem is, I can't read the newly updated attribute value.
To make the situation clearer, I included the code snippet below. I hope that anybody here can help me with this.
var response = $('.response');
$('body').on('click', '.btn', function() {
var btn = $(this),
t = btn.parent('.dummy'),
n = t.find('input[type=number]'),
val = n.val(),
oldval = n.data('oldval');
n.attr('data-oldval', val+oldval);
response.text(n.data('oldval'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dummy">
<input type="number" value="1" data-oldval="0">
<button class="btn" type="submit">Add</button>
</div>
<div class="response"></div>
Two issues; you need to retrieve the value using data('oldval'), not attr(), and you also need to convert val() to an integer so it can be added to the old value. Try this:
var response = $('.response');
$('body').on('click', '.btn', function() {
var btn = $(this),
t = btn.parent('.dummy'),
n = t.find('input[type=number]'),
val = parseInt(n.val(), 10),
oldval = n.data('oldval');
n.data('oldval', val + oldval);
response.text(n.data('oldval'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dummy">
<input type="number" value="1" data-oldval="0">
<button class="btn" type="submit">Add</button>
</div>
<div class="response"></div>
You need to parse the number entered into the input or it will be returned as a string and concatenated when setting val + oldval
console.log(typeof(val)) // string
val = parseInt(n.val());
You can also set the attribute by using the jQuery data method, the same way you're retrieving it to update the response element.
n.data('oldval', val + oldval);
See https://jsfiddle.net/aso1s0xz/
There is already a great answer but here is solution without data-oldval as I don't see why is it needed in this case.
$('body').on('click', '.btn', function() {
var response = parseInt($('.response').text());
if(isNaN(response))response=0;
var val = parseInt($('input').val());
var sum = val+response;
$('.response').text(sum);
})
To get dynamic Value Try JS, It will work perfectly
document.getElementById('element-id').getAttribute('data-oldval');
Use the Data() method in jQuery to set the value too:
var response = $('.response');
$('body').on('click', '.btn', function() {
var btn = $(this),
t = btn.parent('.dummy'),
n = t.find('input[type=number]'),
val = n.val(),
oldval = n.data('oldval');
n.data('oldval', parseInt(val)+parseInt(oldval));
response.text(n.data('oldval'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dummy">
<input type="number" value="1" data-oldval="0">
<button class="btn" type="submit">Add</button>
</div>
<div class="response"></div>
I 'm in the process of creating a calculator where I have a button for each number.
When a button is pressed, depending on the id, the number gets printed on the screen. Each button adds the number pressed to that area of the screen.
This is an example of two buttons:
<button class="btn btn-default" id="1" onclick="APP.agregarNumeros()">1</button>
<button class="btn btn-default" id="2" onclick="APP.agregarNumeros()">2</button>
<p id="resultado"></p>
<script>
var counterAPP = {
agregarNumeros:function(){
var resultado = "";
if ($("#1")) {
resultado += $("#resultado").text("1");
}
else if ($("#2")) {
resultado += $("#resultado").text("2");
}
}
};
window.APP = counterAPP;
Now, if I click on any of the two buttons, I get "1" printed on the screen. If I click the button (any of them) again, nothing happens.
Why is that? Any help would be greatly appreciated.
Pass the argument in inline-function. this.id will send value of current elements id attribute.
resultado will be key of the Object and it is initialized to 0, every time click takes place, this.resultado is incremented according to the value of the clicked element
parseInt will cast the string argument to integer
Try this:
var counterAPP = {
resultado: 0,
agregarNumeros: function(id) {
this.resultado += parseInt(id);
$("#resultado").text(this.resultado);
}
};
window.APP = counterAPP;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button class="btn btn-default" id="1" onclick="APP.agregarNumeros(this.id)">1</button>
<button class="btn btn-default" id="2" onclick="APP.agregarNumeros(this.id)">2</button>
<p id="resultado"></p>
Your HTML Should be
<button class="btn btn-default" id="1" onclick="APP.agregarNumeros(this)">1</button>
<button class="btn btn-default" id="2" onclick="APP.agregarNumeros(this)">2</button>
<p id="resultado"></p>
Your script should be
var resultado = 0;
var counterAPP = {
agregarNumeros:function(e){
var currValue = $(e).text();
resultado += parseInt(currValue);
$("#resultado").text(resultado);
}
};
window.APP = counterAPP;
variable resultado is a global variable initilized to 0.
once clicking button catch the value of the pressed value using the reference passed to the function and store it in currValue variable.
add the resultado to the currValue to get the new value.
append the resultado to the div.
Find the JS Fiddle here - https://jsfiddle.net/9ewwzmm1/
I have a HTML button like
<input type="button" id="button" onclick="showSuper()" value="Click Me!" />
Inside JavaScript, I have
var showSuper = function() {
var btn = document.getElementById('button');
var spanSuper = "<sup>3</sup>";
btn.value="You Clicked Me " + spanSuper;
//btn.value = "You Clicked Me " + <sup>a</sup>;
}
With the above function the button value is getting replaced with You Clicked Me <sup>3</sup>
I also tried with the comment statement that also didn't succeed. How can add a superscripted text to the button?
You do not need script to do this. Use this instead
<button name="button" id="button" onclick="showSuper()">Click Me!</button>
Script
var showSuper = function() {
var btn = document.getElementById('button');
var spanSuper = "<sup>3</sup>";
btn.innerHTML= "You Clicked Me " + spanSuper;
}
Check Demo. Updated Demo with your solution
If you want to change the value of the button after click. As per Starx suggested add something like this.
HTML
<button onclick="showSuper(this);">Click Me</button>
JS
function showSuper(btn){
btn.innerHTML="You Clicked Me" + "<sup>3</sup>";
}
You can use Unicode text like this: <input type="button" value="☺" /> or you can do this<sup>1</sup> AND then copy the one or this ¹ aka`value="¹"
Things You Can do to get them:
SEARCH Alt(unicode) superscript (Letter or number)
and you should find somthing like this
fn alt(laptop)or alt (numlock on) 1223 and release all at the same time