I have 2 questions, both regarding clicking via js.
So I am on a site and I wish to automate a physical click on 2 buttons, I learned that if we getElementbyId.click() we can do this. But both these buttons do not have an ID. I tried coordinate clicking and it doesn't work and also by the class but to no avail.
<td data-pick="red" class="red" rowspan="2"></td>
How do I click on this?
and also
<button type="submit" class="btn btn-default btn-success">GO</button>
and this.
document.getElementsByClassName doesn't work :(
Give this a try
document.getElementsByClassName('red')[0].click();
Why [0] ? because getElementsByClassName returns classes (matching DOM elements) in form of an array, so [0] is the index here :-)
And for your second button you can trigger the click using
document.querySelector("button[type=submit]").click();
By the way if you are using jquery then why don't you use
$(".red").click();
$("button[type=submit]").click();
Anyways both solutions should work.
Hope that helps :-)
Use jQuery..
$('td[class="red"], button[class="btn btn-default btn-success"]').click();
It is possible to trigger a click using document.getElementsByClassName but you have to understand what you get back from document.getElementsByClassName is not an individual element, but a list which you can iterate over.
You can trigger a click for every item in a collection by doing the following:
var redClassElements = document.getElementsByClassName('red');
for(var i=0;i<redClassElements.length;i++) {
redClassElements[i].click();
}
This will do nothing if you haven't assigned a click handler to the element click() is being called on though.
Also, do you really want to trigger a click on multiple elements? Your best bet is to assign the element an id as has been suggested to you. You can then use document.getElementById('theId').click().
Related
The clear button isn't working to clear list-group history
//html
<button class="btn btn-primary mb-3"
type="button"
id="clear-inputs"
onclick="clearIt()">
Clear history
</button>
<form id="history"></form>
<div class="list-group" id="history"></div>
//javascript clear button function
function clearIt() {
document.getElementById('history').value = "";
}
You have two elements with the same id (the <form> and the <div>). Browsers will render this, but it is invalid html, as the id attribute is supposed to be unique to an element. getElementById() is going to grab the first element with the designated id.
The second problem with your html is that neither form or div elements have a value attribute, so there is nothing for your function to clear. It is unclear from your example which element is supposed to be cleared by your button. For the <div>, you could try setting document.getElementById('yourUniqueId').innerHtml = "". That will clear any html inside of the <div>.
You don't need javascript for clear button, you can just use html for clear button only in form tag. Use for clear.
Here is a simple example: example
you have two 'history' id's - not a good practice
use 'innerhtml' instead of value - will yield much better results. value is better for like inputs like a
Make sure you provide a unique ID for your elements,
2 elements above has the same ID, also the function must be defined before calling it.
Always check your Console for logging/errors :)
Super basic question. How do I trigger the clicking of a button in javascript?
Here's the relevant code
<button class="button--unstyled link-without-visited-state inline-block font-size-inherit topcard-see-more-link" type="button">See all</button>
I know the solution is something like this
document.getElementById("myButton").click();
I'm new to this unsure what from the code I would replace with "myButton" and if anything goes inside the click parentheses
First, if you're using getElementById, you need to give your element an Id. Without which, it's not going to work, so in your case:
<button id="myButton" class="button--unstyled link-without-visited-state inline-block font-size-inherit topcard-see-more-link" type="button">See all</button>
Next, we'll set up the button so it can be referenced later
const myButton = document.getElementById('myButton');
Finally, we'll add a click event listener:
myButton.addEventListener('click', myFunction);
This is going to add a click listener to our button and fire the myFunction function when it's clicked.
There's a couple of others ways to achieve the same thing. I would suggest checking out MDN for more details!
https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event
Your code is looking for an element with id="myButton", but it is probably returning null; it will work if you add the id property to the button:
<button id="myButton" class="......"></button>
First of all, I couldn't find this question over here, so I don't know if it has been answered yet.
I have a listener for all the clicks in my site, and then calls a function that checks if the target has the class "wave". If so, it displays a wave effect.
I have tiles with this class, and it works fine, except they have large icons, and if you click them, it does not recognise it as a target with the class.
I tried to put all the tiles inside a div with the class, but somehow it does not recognise it as a target with this class either (I'm assuming it recognize as clicking the target inside them).
I tried to put the 'true' at the end of the listener, in case the bubbling direction could help me, but it didn't.
Any idea? thanks in advance and sorry for my ignorance.
jsfiddle
<div class="tile-container">
<div class="tile efecteona">
<h3 class="titol-tile">Gràfics</h3>
<i class="fa fa-bar-chart tile-icon "></i>
</div>
</div>
"efecteona" would be "wave" class
https://jsfiddle.net/qtLvef8o/2/
As the other answers note, the target returns the actual clicked element which in this case is the icon and not the div with the class.
Since you use jQuery though, why not use its delegate syntax which allows for this ?
$(document).on('click', '.efecteona, button', addOnaEffect);
and set target = this inside your hander.
updated demo at https://jsfiddle.net/qtLvef8o/4/
When you are asking about the e.target it gets the i element, and the i element doesn't have the class you need and neither had the tagname button.
Add this console.log(target); next to your line var target = e.target; and you will see what I'm saying.
When you click an element the event bubbles all the way up to the document, while the target is always the element which initialized it. In your case, it seems that your code assumes the target is a tile element, while in fact it can also be the icon element.
Since you tagged on the question that you are using jQuery, there's a simple solution. Use jQuery closest method.
var target = $(e.target).closest('.efecteona, button').get(0);
Code example
The target is wrong is this case.
I tried to explain by resetting the target when it's the parent that has the class (a bit dirty, can be optimised / better written but it's just to explicitly show the target issue)
https://jsfiddle.net/OxyDesign/wbxvqt2b/1/
This is probably really obvious, but because it's hard to clearly describe, I can't find anything through searching.
I want to do something where if a user clicks on any of several buttons, one event gets triggered. Is this possible? This is what I've tried, but it doesn't appear to work:
$("#button1" || "#button2").click(function() {alert("example")});
Try this:
$("#button1, #button2").click(function() {alert("example")});
http://api.jquery.com/multiple-selector/
Just apply the handler to all the buttons.
$("#button1,#button2").click(...
Using the , creates a multiple selector, and because of jQuery's "implicit iteration", it will add the click() handler to all matched elements.
That said, if there are many buttons, usually it's nicer to give all the buttons a common class.
$(".my_buttons").click(...
For example i'm using append, and for example i'm appendig button in to a div, and i have function $('button_id').click(... etc to work affter i append the div, how can i do that.I mean i get no errors, but the function is not starting, it's because i append and then i want to use the function but how to do that, i tryed with delegate, but same thing.I tryed with function in the button tag , onmouseover and then the function thing, but nothing it gives me function not found.What is the solution ?
I have two events, one event is click event that appends button, the other event is click event that does something if the button that was appended is clicked, but that second event is not working ?
Try using :
$(elem).live(...)
It will bind event for now and in the future.
Firstly, it always helps if you show us the exact source code. $('button_id') is the incorrect selector to start with, try something more along the lines of $('#button_id') as your selector. Also, are you appending dynamic content? Anyways, I've always used the delegate() function quite successfully, but have you tried using the live() function? Also, one more thing to make sure of is that you have the newest version of jQuery as your source.
As was stated as well, you can not have duplicate ids, if you want to have a pointer, use class, instead of id="some_id" use class="appended". To select those using jQuery, use the selector like this $('.appended').
Try something like this it will work as per your expectations.
$("#button_id").click(function(){
//On click code goes here
}).appendTo($("#div_id"));
It's difficult to determine the problem you're having without seeing your code, but delegate (or live) should be perfect for what you're trying to do:
$("body").delegate("#b", "click", function() {
alert("ok");
});
$("#example").append('<input type="button" id="b" value="Click" />');
The click handler above will fire when an element with id="b" is clicked, whether or not that element happens to be in the DOM right now or not.
However, as others have noted, it's important to remember that IDs need to be unique within a document, so by the sounds of it you may be better of using classes instead.
You can see an example of the above code running here.