How to click on button by onclick method? - javascript

I am use puppeteer for get data from page. But all button on webpage have same type and class - only difference is onclick attribute. I need click on different button to open tray with information I need.
For example:
> <button type="button" class="btn btn-primary"
> onclick="OpenTray(10002)">More</button>
> <button type="button" class="btn btn-primary"
> onclick="OpenTray(10003)">More</button>
> <button type="button" class="btn btn-primary"
> onclick="OpenTray(10004)">More</button>
So how I can tell puppeteer only click on button with onclick attribute for example OpenTray(10002)

You should be able to achieve this with a slightly more complex selector:
const button = await page.waitForSelector(`button[onclick="OpenTray(10004)"]`)
There are a lot of attribute selectors you can use to match the values of the attributes e.g. contains, starts with, ends with.

Related

Calculate on keydown and up with jquery in tables [duplicate]

I have 3 buttons with same ID. I need to get each button's value when it's being clicked.
<button id="xyz" type="button" class="btn btn-primary" value="1">XYZ1</button>
<button id="xyz" type="button" class="btn btn-primary" value="2">XYZ2</button>
<button id="xyz" type="button" class="btn btn-primary" value="3">XYZ3</button>
Here is my current jQuery script:
$("#xyz").click(function(){
var xyz = $(this).val();
alert(xyz);
});
But it works only for the first button, clicking on the other buttons are being ignored.
I have 3 buttons with same id ...
You have invalid HTML. You can't have more than one element in a page with the same id attribute value.
Quoting the spec:
7.5.2 Element identifiers: the id and class attributes
id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.
Solution: change from id to class:
<button type="button" class="btn btn-primary xyz" value="1">XYZ1</button>
<button type="button" class="btn btn-primary xyz" value="2">XYZ2</button>
<button type="button" class="btn btn-primary xyz" value="3">XYZ3</button>
And the jQuery code:
$(".xyz").click(function(){
alert(this.value);
// No need for jQuery :$(this).val() to get the value of the input.
});
But it works only for the first button
jQuery #id selector docs:
Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.
If you look at the jQuery source you can see when you call $ with an id selecor-($("#id")), jQuery calls the native javascript document.getElementById function:
// HANDLE: $("#id")
} else {
elem = document.getElementById( match[2] );
}
Though, in the spec of document.getElementById they didn't mention it must return the first value, this is how most of (maybe all?) the browsers implemented it.
DEMO
ID means "Identifier" and is valid only once per document. Since your HTML is wrong at this point, some browsers pick the first, some the last occuring element with that ID.
Change ids for names would be a good step.
Then use $('button[name="xyz"]').click(function(){
From my experience, if you use $('button#xyz') selector instead it will work. That's a hack, but it's still invalid HTML.
Although changing the id's to a class is better, you can get all the elements with the same id using the attribute equals selector:
$('[id="xyz"]')
Or this to get only buttons with id xyz:
$('button[id="xyz"]')
Or divs with id xyz:
$('div[id="xyz"]')
etc.
Alternatively you could use the "Attribute Contains Selector" to get all elements with ids that contain "xyz":
$('[id*="xyz"]')
Of course, this means all elements with id that partially contain "xyz" will get selected by this.
this also worked if you have multiple element with same id.
$("button#xyz").click(function(){
var xyz = $(this).val();
alert(xyz);
});
you can check HERE
If you have same id in a container you can use on() to access each element for every event
$("#containers").on("click","#xyz",function(){
alert($(this).val())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="containers">
<button id="xyz" type="button" class="btn btn-primary" value="1">XYZ1</button>
<button id="xyz" type="button" class="btn btn-primary" value="2">XYZ2</button>
<button id="xyz" type="button" class="btn btn-primary" value="3">XYZ3</button>
</div>
and info about on() is here
You can't have the same id because id is unique in page HTML. Change it to class or other attribute name.
$('attributename').click(function(){ alert($(this).attr(attributename))});

JavaScript script only working on the first element it detects? [duplicate]

I have 3 buttons with same ID. I need to get each button's value when it's being clicked.
<button id="xyz" type="button" class="btn btn-primary" value="1">XYZ1</button>
<button id="xyz" type="button" class="btn btn-primary" value="2">XYZ2</button>
<button id="xyz" type="button" class="btn btn-primary" value="3">XYZ3</button>
Here is my current jQuery script:
$("#xyz").click(function(){
var xyz = $(this).val();
alert(xyz);
});
But it works only for the first button, clicking on the other buttons are being ignored.
I have 3 buttons with same id ...
You have invalid HTML. You can't have more than one element in a page with the same id attribute value.
Quoting the spec:
7.5.2 Element identifiers: the id and class attributes
id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.
Solution: change from id to class:
<button type="button" class="btn btn-primary xyz" value="1">XYZ1</button>
<button type="button" class="btn btn-primary xyz" value="2">XYZ2</button>
<button type="button" class="btn btn-primary xyz" value="3">XYZ3</button>
And the jQuery code:
$(".xyz").click(function(){
alert(this.value);
// No need for jQuery :$(this).val() to get the value of the input.
});
But it works only for the first button
jQuery #id selector docs:
Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.
If you look at the jQuery source you can see when you call $ with an id selecor-($("#id")), jQuery calls the native javascript document.getElementById function:
// HANDLE: $("#id")
} else {
elem = document.getElementById( match[2] );
}
Though, in the spec of document.getElementById they didn't mention it must return the first value, this is how most of (maybe all?) the browsers implemented it.
DEMO
ID means "Identifier" and is valid only once per document. Since your HTML is wrong at this point, some browsers pick the first, some the last occuring element with that ID.
Change ids for names would be a good step.
Then use $('button[name="xyz"]').click(function(){
From my experience, if you use $('button#xyz') selector instead it will work. That's a hack, but it's still invalid HTML.
Although changing the id's to a class is better, you can get all the elements with the same id using the attribute equals selector:
$('[id="xyz"]')
Or this to get only buttons with id xyz:
$('button[id="xyz"]')
Or divs with id xyz:
$('div[id="xyz"]')
etc.
Alternatively you could use the "Attribute Contains Selector" to get all elements with ids that contain "xyz":
$('[id*="xyz"]')
Of course, this means all elements with id that partially contain "xyz" will get selected by this.
this also worked if you have multiple element with same id.
$("button#xyz").click(function(){
var xyz = $(this).val();
alert(xyz);
});
you can check HERE
If you have same id in a container you can use on() to access each element for every event
$("#containers").on("click","#xyz",function(){
alert($(this).val())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="containers">
<button id="xyz" type="button" class="btn btn-primary" value="1">XYZ1</button>
<button id="xyz" type="button" class="btn btn-primary" value="2">XYZ2</button>
<button id="xyz" type="button" class="btn btn-primary" value="3">XYZ3</button>
</div>
and info about on() is here
You can't have the same id because id is unique in page HTML. Change it to class or other attribute name.
$('attributename').click(function(){ alert($(this).attr(attributename))});

how to disable angular2-ladda from HTML and prevent class overwriting by ladda

I'm just beginner to Angular and I have got the following query.
I've used angular2-ladda for button loading, I want to keep button disabled when view loads, what I did is as follow,
<button [ladda]="isLoading" data-color="mint" data-size="s" class="btn btn-success add-product" disabled="disabled">Add</button>
about the first question I've used attribute disabled to disable button but it is not working, and the second it overwrites class btn btn-success.
for solution what i did is, I've disabled button from JS and the btn btn-success style applied by css.
is there any way to solve this, if yes please let me know.
To disable the button use [disabled] property.
<button [ladda]="isLoading" data-color="mint" data-size="s" class="btn btn-success add-product" [disabled]="disabled">Add</button>

Conditionally active click event on js button

I need a function on a button only if a bool conditional is met. Currently I have it implemented similar to
<button class="btn btn--primary pull-right" type="submit" data-bind="click: myBoolFlag ? $root.myFunction : function(){}"/>
I am using this button as my generic submit button on multiple pages, but on two of them it merely needs to add in a small function on click ontop of its normal submit functionality.
I feel as though doing this via an anonymous empty function isn't the best route, and am looking for cleaner alternatives.
In this situation I usually do something like so..
HTML
<!-- I gave it an ID to make it unique -->
<button id="myButton" class="btn btn--primary pull-right" type="submit"/>
JavaSCript/jQuery
//this handles the click function now
$('#myButton').click(function() {
if(condiion1){
do this;
} else {
do that;
}
});
Try returning true if you don't want to a function to be executed on click
<button class="btn btn--primary pull-right" type="submit" data-bind="click: myBoolFlag ? $root.myFunction : return true;"/>
Other option would be null
data-bind="click: myBoolFlag ? $root.myFunction : null"

Button redirect not working

Can someone tell me why this is not working:
<button class="btn danger" id="delete" onclick="return $(location).attr('href','http://yahoo.com');">Delete</button>
I have this placed in a form just beside the submit button. When it's clicked, it's like I clicked the submit button.
If you're trying to make the button load that URL, the correct way to do it is:
<button class="btn danger" id="delete" onclick="document.location.href = 'http://yahoo.com'">
I don't think wrapping it in jQuery helps much here since location isn't a DOM object.
Use the window.location property. See comment below.

Categories