I was wondering if anyone could help with a simple JavaScript code to click all buttons with the same value name/input name on a page?
They each share:
<input name="all" type="submit" value="Do All">
Here's a screenshot of the buttons: http://oi61.tinypic.com/2nqblnr.jpg
Maybe one should make a button that works as a "click all" button? This will be a chrome extension (for personal use), so I can't really go about changing the "do all" button's code.
I was having a hard time finding it on Google, and I'm fine with HTML/CSS but really terrible with JavaScript.
To click all the buttons on the page with the same name you can use getElementsByName() function and set it to a variable which will hold all the buttons in a NodeList then loop through the NodeList and call the click() event for each button.
For example:
// Get all buttons with the name 'all' and store in a NodeList called 'buttons'
var buttons = document.getElementsByName('all');
// Loop through NodeList and call the click() function on each button
for(var i = 0; i <= buttons.length; i++)
buttons[i].click();
// Select all buttons with class .btn
const inputBtns = document.querySelectorAll('[name="all"]');
// Select click all button
const clickAllBtn = document.querySelector('.click-all');
// Attach click handler to all input buttons
for(let i = 0; i < inputBtns.length; i++) {
inputBtns[i].addEventListener('click', function() {
alert(this.value);
})
}
// Click all buttons, when user click .click-all button
clickAllBtn.addEventListener('click', function() {
for(let i = 0; i < inputBtns.length; i++) {
inputBtns[i].click();
}
})
<input name="all" type="submit" value="Do All 1">
<input name="all" type="submit" value="Do All 2">
<button type="button" class="click-all">
click all
</button>
This worked for me assuming the of those elements had href="#show" or something similar
var buttons = document.querySelectorAll('[href="#show"]');
for(var i = 0; i <= buttons.length; i++)
buttons[i].click();
I guess this is what you want to achieve :
jsfiddle : http://jsfiddle.net/vqk2V/
Achieved using .click()[http://api.jquery.com/click/] method of jquery.
With Java...maybe using Selenium. But you can use jquery (javascrpt's framework) so the code could be:
<scrpipt>
function ClickAllButtons()
{
if($("input[type=button][name='someName']").length > 0)
{
$('input[type=button]').each(function(i){
var $currentButton = $(this);
$currentButton.click();
});
}
}
</script>
var buttons = document.getElementsByClassName('uArJ5e');
// Loop through NodeList and call the click() function on each button
for(var i = 0; i <= buttons.length; i++)
buttons[i].click();
This will click all buttons on google ;)
What you would want to do is create a class eg.
public class MyClass{
........
}
..and then create methods which do the processing that is done when you click your buttons.
Then call the methods with an object if your methods are non static in the specific buttons you require the method in.
Now you can create a button which calls all the methods you want to call and it will do what you are asking for.
Related
How can I press all the buttons in a page given the html code below?
I want to get the button name, and if the child value matches favorite_border to automatically press the button.
<button type="button" class="UnstyledButtonreact__UnstyledButton-sc-ty1bh0-0 btgkrL"><i size="20" aria-label="Favorite" value="favorite_border" class="Iconreact__Icon-sc-1gugx8q-0 FavoriteIconreact__StyledIcon-sc-289aae-0 irmnIh fNbWaJ material-icons">favorite</i></button>
So far I've came up with the follwoing javascript code but the problem is that for other buttons are getting pressed too breaking the flow and redirecting me to a separate page.
var buttons = document.getElementsByClassName('UnstyledButtonreact__UnstyledButton-sc-ty1bh0-0 btgkrL');
for(var i = 0; i < buttons.length; i++)
buttons[i].click();
After a few more searches I figured the answer myself. The final code is:
var buttons = document.getElementsByClassName('UnstyledButtonreact__UnstyledButton-sc-ty1bh0-0 btgkrL');
for(var i = 0; i < buttons.length; i++)
var btn = buttons[i];
var child = btn.firstChild;
if (child.innerHTML == "favorite_border") {
buttons[i].click();
}
I have several buttons in my webpage in the 'addbutton' class and I want an alert to pop up any time any one of them is clicked. How would you do this?
Here are some JS pieces of code I have already tried (that have not worked):
addbuttons = document.getElementsByClassName("addbutton")
addbuttons.onclick {
for (var i=0; i<addbuttons.length; i++) {
alert("hi")
}
document.getElementsByClassName("addbutton").onclick = function() {
alert("hi")}
And my HTML:
<input type="checkbox">
<p>Breakfast:</p>
<button class="addbutton">+</button>
<div></div>
<br>
<input type="checkbox">
<p>Mid-Morning:</p>
<button class="addbutton">+</button>
<div></div>
<br>
document.getElementsByClassName("addbutton") returns an Array(HTMLCollection to be precise).
Also, you need to set the onclick to a function, you cannot use the syntax .onclick { }.
To set a listener for every button you will need to use a for loop somewhat like this
for(let i = 0; i < addbuttons.length; i++){
addbuttons[i].onclick = function(){
alert('Works!')
}
}
Or if you are using ES6
for(let addButton of addbuttons){
addButton.onclick = function(){
alert('Works!')
}
}
Probably relevant links,
https://www.w3schools.com/js/js_loop_for.asp
https://www.w3schools.com/jsref/event_onclick.asp
Let's define your event:
function myEvent() {
alert("hi");
}
Now let's get your elements by class name, loop them and add an event listener to them:
for (let btn of document.getElementsByClassName("addbutton")) btn.addEventListener("click", myEvent);
Your mistake was that you assumed that you have an onclick for the set of elements, returned by getElementsByClassName, however, you only have onclick for the elements inside the set.
So I have a web page with around 20 buttons on it and I want to click all of them through the console of Google Chrome.
The classes of the buttons are all the same; however, a lot of other non button elements also have the same class.
How can I only click the buttons with the same class (for example: randomclass) and add a 1 second delay between each click.
I started off with:
var elems = document.getElementsByClassName("randomclass");
Now when I look at that array, I not only get buttons but also links with that same class which I don't want to click.
After that I'm typing in:
for(var i=0; i<elems.length;i++) { elems[i].click(); }
What this is doing is clicking all of the elements inside the array. How to tell it to only look at buttons (
Thanks guys. Interested in seeing what's the solution for this.
You can add an if statement to clarify that simple requirment:
for(var i=0; i<elems.length;i++) {
if( elems[i].tagName.toLowerCase() === "button" )
elems[i].click();
}
In the future, or with more complex filters, you can use document.querySelectorAll() method to get your nodes.
var elems = document.querySelectorAll('button.randomclass');
for( var i = 0; i < elems.length; i++ ) {
//Do stuff here...
}
this solutions is jQuery based. :)
$('.clickme').each(function(i,button){
$(button).click(function(e){
console.log('im on fire ',$(this).attr('name'));
});
});
$('#fire').click(function(){
console.log('fired');
$('.clickme').each(function(i,button){
$(button).trigger('click');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='button' id='fire' value='FIRE BOTH' />
<input type='button' name='one' class='clickme' value='One' />
<input type='button' name='two' class='clickme' value='Two' />
Try this code
var elems = document.querySelectorAll("button.randomclass");
function runClick(){
if(elems.length){
elems[0].click(); //<= you can use jquery click event => $(elems[0]).click()
elems.splice(0, 1);
setTimeout(function(){
runClick();
}, 1000);
}
}
runClick();
First, just get the buttons with Document.querySelectorAll and go from there.
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
i have made a calculator. i have uploaded it on the following webpage.
www.vipulshree.com
i want to highlight a button on clicking it and remove highlight from it when another button is clicked. when the next button is clicked, it should change color/disable/highlight and the previous button comes back to normal. Please help me ive searched all over the net for this and could not find anything. Help me im desperate.
Thank You.
You can define a class for your buttons and then using the click event you can change its color, and when you click on any button save it in variable say "previous".
So when you click any other button you again change the color of the saved button variable
and assign the current button to that variable.
var previous;
document.getElementsByClassName("className").onclick = function (){
// change the color of the previous element
previous = this;
// change the color of this button
}
Use the :focus CSS pseudo-selector. It will match the element currently having focus. Seems to not work on buttons
Use JavaScript to add a class .focused on click, and remove it on all other elements. Use event delegation on the common parent of all buttons (in this code, it's assumed to be #container).
<script type="text/javascript">
setFocus = function(e) {
if (document.getElementsByClassName('focus')[0]) document.getElementsByClassName('focus')[0].className = '';
if (e.target.tagName.toLowerCase() == 'button') {
e.target.className = 'focus';
}
};
document
.getElementById('container')
.onclick = setFocus;
</script>
My HTML markup looked like this:
<div id="container">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</div>
Working Example
here is a little jsfiddle working example, it's using jQuery only for the dom ready loader and a CSS class to do the highlight effect.
http://jsfiddle.net/t6bJ3/
var buttons = document.getElementsByTagName('button'),
buttonsLength = buttons.length,
selected,
i = 0,
reset = function() {
for (i = 0; i < buttonsLength; i++) buttons[i].className = '';
},
highlight = function(ev) {
reset();
ev.target.className = 'highlight';
};
for (; i < buttonsLength; i++) buttons[i].onclick = highlight;
I'm wondering if it's possible for a script to enable/disable all input elements on the page with some sort of toggle button.
I googled it but didn't find anything too useful except for this:
http://www.codetoad.com/javascript/enable_disable_form_element.asp
but I'm not sure how to edit it for the toggle.
Something like this would work:
var inputs=document.getElementsByTagName('input');
for(i=0;i<inputs.length;i++){
inputs[i].disabled=true;
}
A working example:
$().ready(function() {
$('#clicker').click(function() {
$('input').each(function() {
if ($(this).attr('disabled')) {
$(this).removeAttr('disabled');
}
else {
$(this).attr({
'disabled': 'disabled'
});
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<input type='text'></input>
<input type='text'></input>
<input type='text'></input>
<div id='clicker' style='background-color:#FF0000; height:40px; width:100px;'></div>
Here is a function to toggle all inputs on the page:
function toggle_inputs() {
var inputs = document.getElementsByTagName('input');
for (var i = inputs.length, n = 0; n < i; n++) {
inputs[n].disabled = !inputs[n].disabled;
}
}
It works by using the logical NOT operator (the exclamation point), which returns the opposite of the operand. For example, !true will return false. So by using !inputs[n].disabled, it will return the opposite of what it's currently set to, thereby toggling it.
If you need code to bind the click event to the button:
document.getElementById('your_button_id').onclick = toggle_inputs;
You can also use addEventListener, but see the linked page for more information, including compatibility with Internet Explorer. The code I gave above should work across all browsers with no trouble.
for (var i = 0; i < document.getElementyByTagName('input').length; i++) {
document.getElementsByTagName('input')[i].disabled = 'disabled';
}
http://code.google.com/p/getelementsbyclassname/
^^Robert Nyman has a "get elements by class" script. Basically you'd just assign all those input elements to the same class, and then do something like:
//Collapse all the nodes
function collapseNodesByClass(theClass){
var nodes = getElementsByClassName(theClass);
for(i = 0; i < nodes.length; i++){
nodes[i].style.display='none';
}
}
This is a piece of code I'm actually currently using to collapse everything with a given class name (it uses the script I mentioned above). But in any case I think the key to your problem is being able to refer to multiple elements at once, which that script will help you with.
Also the link in your question didn't work for me :(.