This question already has answers here:
Adding click event listener to elements with the same class
(5 answers)
Closed 8 months ago.
I'd like to perform the logic in the "onClick" through the event listener in jS but it only seems to run once? I have the class in all four but I can't figure out why it seems to only work for the first?
HTML:
<button id='btn-1' type="button" name="first" class="breakdown main-text" onclick="enableButton('btn-2');disableButton('btn-1');show('btn-1')"> Breakdown Start </button>
<button id='btn-2' type="button" name="second" class="breakdown main-text" onclick="enableButton('btn-3');disableButton('btn-2');show('btn-2')" disabled> Repair Start </button>
<button id='btn-3' type="button" name="third" class="breakdown main-text" onclick="enableButton('btn-4');disableButton('btn-3');show('btn-3')" disabled> Repair End </button>
<button id='btn-4' type="button" name="fourth" class="breakdown main-text" onclick="show('btn-4')" disabled> Breakdown Ended </button>
JS:
let button1 = document.querySelector('#btn-1')
let button2 = document.querySelector('#btn-2');
let button3 = document.querySelector('#btn-3');
let button4 = document.querySelector('#btn-4');
const breakdownButton = document.querySelector('.breakdown');
breakdownButton.addEventListener('click', function() {
console.log(this.innerHTML);
});
You need to use querySelectorAll which will return a collection.Now use spread operator (three dots) to convert it to array and use forEach .Inside forEach callback add the event listener to it
[...document.querySelectorAll('.breakdown')].forEach(function(item) {
item.addEventListener('click', function() {
console.log(item.innerHTML);
});
});
<button id='btn-1' type="button" name="first" class="breakdown main-text"> Breakdown Start </button>
<button id='btn-2' type="button" name="second" class="breakdown main-text" disabled> Repair Start </button>
<button id='btn-3' type="button" name="third" class="breakdown main-text" disabled> Repair End </button>
<button id='btn-4' type="button" name="fourth" class="breakdown main-text" disabled> Breakdown Ended </button>
In your snippet you have also attached inline event handler,that may not be necessary.
If the objective is to enable the next button then a function to enable it can be called from the callback function of the event handler
Need to use querySelectorAll instead of querySelector. And iterate over the list like this.
const breakdownButton = document.querySelectorAll('.breakdown');
// It add event listeners for the first button element.
// you can use forloop or map function to iterate over the list elements
// and here i used breakdownButton[0] as an example.
breakdownButton[0].addEventListener('click', function() {
console.log(this.innerHTML);
});
Use iterate functions like forEach or map. I used forEach
const breakdownButton = document.querySelectorAll('.breakdown');
breakdownButton.forEach(function(btn) {
btn.addEventListener('click', function() {
console.log();
});
});
Look at the documentation for querySelector:
querySelector() returns the first Element within the document that matches the specified selector, or group of selectors.
If you want to match more than one element, you'll need to use querySelectorAll and, because it doesn't return a single element loop over the result.
Alternatively, you could use event delegation.
Related
I have four buttons:
<button id="button-yardSize" class="btn btn-success" value="2"><h1>2</h1></button>
<button id="button-yardSize" class="btn btn-success" value="4"><h1>4</h1></button>
<button id="button-yardSize" class="btn btn-success" value="6"><h1>6</h1></button>
<button id="button-yardSize" class="btn btn-success" value="8"><h1>8</h1></button>
And I want to capture the value of the button clicked so that I may add it later with another button and add them together.
I added this for the JS:
var inputYardSize = $("#button-yardSize").on("click", function(){
$("#button-yardSize").val();
console.log(inputYardSize);
});
I read that I may need to use .attr instead, however not sure how to add a custom attribute to the buttons?
First of all, you should use a class, not an ID. IDs should be unique, and $("#button-yardSize") will only select the first button.
In the event listener you can use this to refer to the button that was clicked.
You need to assign the inputYardSize variable inside the function. .on() just returns the jQuery object you're binding the handler to, not the value from inside the function.
$(".button-yardSize").on("click", function() {
var inputYardSize = $(this).val();
console.log(inputYardSize);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-success button-yardSize" value="2"><h1>2</h1></button>
<button class="btn btn-success button-yardSize" value="4"><h1>4</h1></button>
<button class="btn btn-success button-yardSize" value="6"><h1>6</h1></button>
<button class="btn btn-success button-yardSize" value="8"><h1>8</h1></button>
EDIT: You should use ID for unique elements and class for repeating element.
So if you would replace the ID with class on the button, the code should look like this:
Remove the declaration from the beginning and instead use it to store the values inside the click function.
In this way, you will have the value of the clicked button with the specified class.
$('.button-yardSize').on('click', function(){
var inputYardSize = $(this).val();
console.log(inputYardSize);
})
The id of each element has to be unique
<button id="button-yardSize1" class="btn btn-success" value="2"><h1>2</h1></button>
<button id="button-yardSize2" class="btn btn-success" value="4"><h1>4</h1></button>
The JS function is incorrect, you need a click handler which will log the button value
$("#button-yardSize1").on("click", function(){
inputYardSize=$("#button-yardSize1").val();
console.log(inputYardSize);
});
This question already has answers here:
onClick to get the ID of the clicked button
(18 answers)
Closed 7 years ago.
We have multiple forms with different IDs but same onclick function .
For Like ,
<input type="button" id="a" value="SUBMIT" onclick="fnSubmitForm();">
<input type="button" id="b" value="SUBMIT" onclick="fnSubmitForm();">
<input type="button" id="c" value="SUBMIT" onclick="fnSubmitForm();">
How to find the ID of which submit button is submitted.
add the function in the onclick like this
<input type='button' id='a' value='submit' onclick='fnSubmitForm()'/>
<input type='button' id='b' value='submit' onclick='fnSubmitForm()'/>
<input type='button' id='c' value='submit' onclick='fnSubmitForm()'/>
then get the passed value using the following snippet.
function fnSubmitForm(){
console.log(this.document.activeElement.getAttribute("id"));
}
Pass in this to the function:
onclick="fnSubmitForm(this);"
and you can pick up the id:
function fnSubmitForm(el) {
console.log(el.id);
}
DEMO
EDIT
Ok, since you can't edit the HTML, here's a script only solution:
// pick up the input elements with type=button
var buttons = document.querySelectorAll('input[type="button"]');
// add click events to each of them, binding the function
// to the event
[].slice.call(buttons).forEach(function (el) {
el.onclick = fnSubmitForm.bind(this, el);
});
function fnSubmitForm(el){
console.log(el.id);
}
DEMO
Try like this
onclick="fnSubmitForm(this.id);"
and get the value with the first function argument
function fnSubmitForm(id) {
//your code
}
The below code generates a json string on the click of some buttons.
<div id="btnStudios" >
<button type="button" id="01" value="warner" class="btn btn-default">Warner</button>
<button type="button" id="02" value="tf1" class="btn btn-default">TF1</button>
<button type="button" id="03" value="gaumont" class="btn btn-default">Gaumont</button>
<button type="button" id="04" value="pathe" class="btn btn-default">Pathe</button>
<button type="button" id="05" value="studiocanal" class="btn btn-default">StudioCanal</button>
<button type="button" id="06" value="francetv" class="btn btn-default">FranceTV</button>
<button type="button" id="07" value="m6snd" class="btn btn-default">M6SND</button>
</div>
var output = $(".btn").click(function() {
$(this).toggleClass('active');
var output = {
Studios: $('#btnStudios button.active').map(function() {
return $(this).val();
}).get(),
};
if (!output.Studios.length) {
output.Studios = $('#btnStudios button').map(function() {
return $(this).val();
}).get()
$('.list').html(JSON.stringify(output));
});
Basically what i am looking for is a timer which refreshes for 1 second everytime a button is clicked and then generates the json string based on the button selection.
I used the setInterval() function but that did not help.
How would i go about this?
Thanks in advance.
I didn't fully understand your question.
However, based on the code, I assume you want to show a JSON-string based on which buttons have the .active class?
Your code contained syntax errors.
I created a quick JSfiddle with what I think you wanted.
However, I have made no use of setTimeout since I couldn't come up with valid use case.
Feel free to provide us with more info and I'll improve my answer!
EDIT:
Okay, so you want to wait 1sec after the click.
I updated the JSfiddle.
EDIT²:
I'd also use clearTimeout so clicks that happened while you are already waiting 1 sec are ignored.
As seen in this JSfiddle.
my button is defined:
<td>
<button type="button" class="btn btn-danger" id="${machine.uid}">
<spring:message code="vending.generic.delete" />
</button>
</td>
I want to add an event handler to the button.
I tried this:
$(document).on("click",'.btn btn-danger',function(e){
....
}
You can use another dot . without space to target element by multiple classes name:
$(document).on("click",'.btn.btn-danger',function(e){
....
}
Actually .btn btn-danger is an invalid selector, you have to merge by using a dot, so that the meaning becomes "Hey select all elements which contains class btn and class btn-danger"
Try,
$(document).on("click",'.btn.btn-danger',function(e){
....
}
i am looking for solution i want to disable button if value of input box matched.
i got two buttons and an input box
<button type="button" name="buttonpassvalue" value="-1" onclick="showUser1(this.value)"><< Previous</button>
<button type="button" name="buttonpassvalue1" value="1" onclick="showUser2(this.value)">Next >> </button>
<input type="text" id="count" value="0"/>
i want to disable buttonpassvalue if input box (count) is zero and disable second button buttonpassvalue1 if value of (count) is 5
thanks for your help.
Made a JSFiddle for you!
http://jsfiddle.net/fRHm9/
Basically, you make a change event listener and, when it changes, grab the element whose id is equal to the input's value. I assigned the buttons ids of -1 and 1. Check out the fiddle.
Basically, you could achieve this quite easily using plain javascript. But, when using javascript in order to be able to find a specific element efficiently you will need to specify an id for that element. So I would recommend you to change your buttons so that they use id attributes as follows...
<button type="button" id="buttonpassvalue" name="buttonpassvalue" value="-1" onclick="showUser1(this.value)"><< Previous</button>
<button type="button" id="buttonpassvalue1" name="buttonpassvalue1" value="1" onclick="showUser2(this.value)">Next >> </button>
<input type="text" id="count" value=""/>
Note, that I added id attributes to each buttons. Now, you can run attach this javascript function to the keyup event of the text input element...
var input = document.getElementById('count');
input.onkeyup = function(){
var buttonpassvalue = document.getElementById('buttonpassvalue');
var buttonpassvalue1 = document.getElementById('buttonpassvalue1');
var val = this.value.trim();
if(val == "0"){
buttonpassvalue.setAttribute("disabled","disabled");
buttonpassvalue1.removeAttribute("disabled");
}
else if(val == "5"){
buttonpassvalue.removeAttribute("disabled");
buttonpassvalue1.setAttribute("disabled","disabled");
}
else{
buttonpassvalue.removeAttribute("disabled");
buttonpassvalue1.removeAttribute("disabled");
}
};
I have created a JS Fiddler where you can see a quick demo. Also, note that this solution is using plain javascript.