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>
Related
I am new to Javascript.
I have 2 buttons on and off.
Have to set the variable flag to 1 when it is on and set the variable to 0 when it is off.
If flag==1, on button should be displayed; when flag==0, Off button should be displayed.
HTML:
<button class="on">ON</button>
<button class="off">OFF</button>
I tried the below code, but it did not work.
JS:
var flag = 0;
if (flag == 0) {
$('.on').hide();
} else {
$('.off').hide();
}
Could anyone please help?
Thanks
var flag = false;
$(function() {
$('.on').click(e => {
$('.on').hide();
$('.off').show();
flag = true;
console.log({
flag
});
});
$('.off').click(e => {
flag = false;
$('.off').hide();
$('.on').show();
console.log({
flag
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="on">ON </button>
<button class="off">OFF </button>
You could make this as simple as having a function to configure both buttons which also takes a callback to be called every time the state changes.
Something like:
function configureToggle(onButton, offButton, initialState, onChange){
if(initialState == 0)
offButton.hide();
else onButton.hide();
onButton.click(() => {
onButton.hide();
offButton.show();
onChange(1);
})
offButton.click(() => {
onButton.show();
offButton.hide();
onChange(0);
})
}
configureToggle($(".on"),$(".off"), 0, value => {
console.log("Current state is ",value);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="on" > ON </button>
<button class="off"> OFF </button>
here is a solution for that
$('button').on('click',function(){
$('button').toggleClass('hide')
});
.hide{
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="on"> on </button>
<button id="off" class="hide" > off </button>
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()
I used the code below to increment and decrement an input field by 1. I need to disable the minus (-) button by default. If the initial value is 5, the user should not decrease the value less than 5. If they go to 6, enable the minus button to decrease. But, they should not decrease less than 5.
The code works sometimes. Randomly, the button is disabled and isn’t able to decrease even from 10 to 9, 8, 7.
Please let me know whether this solution will work or need to change any other.
let $noofpaxinput = $('#txtnoofpax');
$noofpaxinput.val(5);
let intialvalue = $noofpaxinput.val();
$('.noofpax').click(function() {
if ($(this).hasClass('increasepax')) {
$noofpaxinput.val(parseInt($noofpaxinput.val()) + 1);
$('.decreasepax').prop('disabled', false);
} else if ($noofpaxinput.val() >= intialvalue) {
let getPaxVal = $noofpaxinput.val(parseInt($noofpaxinput.val()) - 1);
if (getPaxVal <= intialvalue) {
$('.decreasepax').prop('disabled', true);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fee-amount">
<button type="button" disabled="disabled" class="noofpax decreasepax">-</button>
<input id="txtnoofpax" type="text" value="5">
<button type="button" class="noofpax increasepax">+</button>
</div>
You could listen to input change and detect whether to disable the decrease button
Remember to parseInt because your input type is text. If you not parse it, '10' < '5' will return true
let $noofpaxinput = $("#txtnoofpax")
$noofpaxinput.val(5)
let intialvalue = $noofpaxinput.val()
$noofpaxinput.on('change', function () {
if (Number($noofpaxinput.val()) <= Number(intialvalue)) {
$(".decreasepax").prop("disabled", true)
} else {
$(".decreasepax").prop("disabled", false)
}
})
$(".noofpax").click(function () {
if ($(this).hasClass("increasepax")) {
$noofpaxinput.val(Number($noofpaxinput.val()) + 1).trigger("change")
}
if ($(this).hasClass("decreasepax")) {
$noofpaxinput.val(Number($noofpaxinput.val()) - 1).trigger("change")
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fee-amount">
<button type="button" disabled="disabled" class="noofpax decreasepax">-</button>
<input id="txtnoofpax" type="text" value="5">
<button type="button" class="noofpax increasepax">+</button>
</div>
You need to check the value of .txtnoofpax inside the click function event to get it everytime the user click.
And then you need to use a else in your last condition.
var noofpaxinput = $('#txtnoofpax'), noofpaxinputInitVal = $(noofpaxinput).val();
$(noofpaxinput).on("input", function(){
checkNoofpaxinput($(noofpaxinput).val(), noofpaxinputInitVal);
});
$('.noofpax').click(function(){
var txtnoofpaxValue = $(noofpaxinput).val();
if ($(this).hasClass('increasepax')){
$(noofpaxinput).val(parseInt(txtnoofpaxValue)+1);
} else if ($(this).hasClass('decreasepax')){
$(noofpaxinput).val(parseInt(txtnoofpaxValue)-1);
}
checkNoofpaxinput($(noofpaxinput).val(), noofpaxinputInitVal);
});
function checkNoofpaxinput(fromValue, Tovalue) {
if (parseInt(fromValue) <= parseInt(Tovalue)) {
$('.decreasepax').prop('disabled', true);
} else {
$('.decreasepax').prop('disabled', false);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div class="fee-amount">
<button type="button" disabled="disabled" class="noofpax decreasepax">-</button>
<input id="txtnoofpax" type="text" value="5">
<button type="button" class="noofpax increasepax">+</button>
</div>
I want that until the Copy List To Below get clicked I want to disable to Save button.
Currently this is the Copy List To Below button
<button type="button" className={classes["copy-btn"] + " btn-cancel mt-3"} onClick={(event) => this.copyData(event)}>Copy List To Below {_.size(this.state.protestList) > 1 ? _.size(this.state.protestList) + " Groups" : 'Group'} </button>
And this is my Save button
<button type="submit" className={classes["save-btn"] + " btn-save"} onClick={(event) => this.saveData(event)}>Save</button>
And below is the respected functions
saveDate = (event, data) => {
if(event) {
//Do something
}
else {
//Return Error
}
}
copyData = (event, data) => {
if(event) {
//Do something
}
else {
//Return Error
}
}
As I said only if Copy is done then only save button should be able get clicked
Give two ids and add click event and toggle button disable property like this. Make it simple. Your buttons has unnecessary attributes, please remove those.
CORE JAVASCRIPT
<button type="button" id="coptBtn" class ="btn-cancel mt-3" >Copy List To Below</button>
<button id="saveBtn" type="submit" class="" >Save</button>
var coptBtn = document.getElementById('coptBtn');
var saveBtn = document.getElementById('saveBtn');
saveBtn.disabled = true;
coptBtn.addEventListener('click', (evt) => {
saveBtn.disabled = false;
});
REACT JS
var App = React.createClass({
getInitialState() {
return {isDisable: false}
},
handleClick(e) {
this.setState({isDisable: true})
},
render() {
return <div>
<button type="button" onClick={this.handleClick} >Copy List To Below</button>
<button type="button" disabled={!this.state.isDisable}>Save</button>
</div>
}
});
Try this code..
copyData() {
//your existing code
this.setState({copied: true})
}
<button type="submit" disable={!this.state.copied} className={classes["save-btn"] + " btn-save"} onClick={(event) => this.saveData(event)}>Save</button>
I have an HTML calculator in a pop up. Everytime i open it the first time the calculations are correct. if i hide the pop up and open it again when i press 6 instead of 6 it shows 66. and if i close it again and open it if i press 5 it shows 555 and etc. Here is my code:
Snippet:
var calculator = document.querySelector('#calculator3');
var keys = calculator.querySelector('#calculator-keys3');
var num="";
keys.addEventListener('click', e => {
if (e.target.matches('button')) {
var key = e.target;
var action = key.dataset.action;
var keyContent = key.textContent;
if (!action) {
num = num + keyContent;
document.getElementById("displayPayment").innerHTML = "num";
}
if (action === 'backspace') {
num = num.slice(0, -1);
document.getElementById("displayPayment").innerHTML = "num";
}
if (action === 'decimal') {
num = num + ".";
}
}
});
<div class="calculator" id="calculator3">
<div class="calculator-keys" id="calculator-keys3">
<button type="button" value="1">1</button>
<button type="button" value="2">2</button>
<button type="button" value="3">3</button>
<button type="button" value="4">4</button>
<button type="button" value="5">5</button>
<button type="button" value="6">6</button>
<button type="button" value="7">7</button>
<button type="button" value="8">8</button>
<button type="button" value="9">9</button>
<button type="button" class="key--operator" data-action="add">+/-</button>
<button type="button" value="0">0</button>
<button type="button" data-action="decimal" value=",">,</button>
<button type="button" class="equal-sign" data-action="backspace" value="del"></button>
</div>
</div>
You need to unbind the event listener first removeEventListener() or check if it's already bound before adding the event listener.
var calculator = document.querySelector('#calculator3');
var keys = calculator.querySelector('#calculator-keys3');
var num="";
var eventListener = function(e) {
if (e.target.matches('button')) {
var key = e.target;
var action = key.dataset.action;
var keyContent = key.textContent;
if (!action) {
num = num + keyContent;
document.getElementById("displayPayment").innerHTML = "num";
}
if (action === 'backspace') {
num = num.slice(0, -1);
document.getElementById("displayPayment").innerHTML = "num";
}
if (action === 'decimal') {
num = num + ".";
}
}
}
keys.removeEventListener('click', eventListener);
keys.addEventListener('click', eventListener);
If you don't remove the first event, then a second event will be bound to the elements the second time you run this script.
you have to add another event when someone click on "closing the model button" and in this you have to clear all the previous values in html so next time someone open the model no previous value is present.