Click div with same id - javascript

I would like to click on a div but the div in question shares the same ID as another div. I have tested several solutions, especially with xpath, but nothing works.
Is there any other solution to click without selector and xpath ?
html
<div class="modal-button" id="button-grey"> Cancel </div>
<div class="modal-button create-modal-button modal-blue-button" id="button-grey"> Accept </div>
My code :
await page.click('#button-grey')
With this code, It clicks cancel when I'd like it to click accept.
Thank advance for your help

It is possibly clicking cancel because the first div it encounters with the id button-grey is your div that says cancel.
Ids are supposed to be unique. Instead try making button-grey a class and add it as an additional class to both divs. Then give the div that says accept a unique id. Use this unique id within await page.click(yourUniqueID).

As Chris G has mentioned, id attributes are meant to be unique to that specific element.
MDN Web Docs describes an id attribute as the following:
The id global attribute defines an identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
Don't use onClick(), but simply change the ids to something more descriptive that are unique. It also makes finding specific elements in your code much easier.
If you cannot change the code, for example if you are web scraping and need them elements, you can use .modal-button:nth-child() to find whatever button you need.

your html is not valid, you can't set serval html tag with the same id.
check your html in [W3C validator]: https://validator.w3.org/#validate_by_input
Transform your "button-grey" id to class

As the comments suggest, id's must be unique.
With this code, It clicks cancel when I'd like it to click accept?
This happens because the browser will use the first element it finds with that id because it only ever expects to find one. In your case, the first one found is for cancel.

It is a faulty HTML code that has multiple items with the same id (which is supposed to be unique). As your question is:
Is there any other solution to click without selector and xpath?
here is a solution with elementHandle.click on the 2nd element [1] with the same id:
const elementHandles = await page.$$('#button-grey')
await elementHandles[1].click() // click 2nd element [1] with the same id
Anyway, XPaths can be useful sometimes if you have to click something based on its text content:
const acceptHandle = await page.$x("//div[#id='button-grey' and contains(text(), 'Accept')]")
await acceptHandle[0].click() // XPath returns an array, the first item [0] is the matching element

Related

Call element by id in javascript

I have a repeater and have a label with an icon inside it.
<strong><i id="iconProperties" class="icon-caret-right"></i> Properties</strong>
When i click a button the icon-caret-right must be turned to icon-caret-down. i have written the code as follows:
$('#iconProperties').removeClass('icon-caret-right').addClass('icon-caret-down');
When i use this code only the first row of the repeater is working. all other rows's icons are not changing. What is the mistake?
ASP.net generates unique ids for html elements and only one element can have id iconProperties that you used in selector. You can use Attribute Contains Selector [name*="value"] instead of id selector to get all the matching elements.
$('[id*=iconProperties]').removeClass('icon-caret-right').addClass('icon-caret-down');
If your ids have a similar name, you're probably after something like
$('[id^=iconProperties]').removeClass('icon-caret-right').addClass('icon-caret-down');
Which will update all items beginning with id "iconProperties".
It might be worth noting that it is common practice to use unique ids.
Try this:
$('#iconProperties').find('.icon-caret-right').replaceWith('.icon-caret-down');

How to use common js function for two divs containig elements of identical ids?

I have common jQuery function and two div tags. Both div tags have different names but both containing elements of identical ids now i want to use this common Jquery function for them both?
I have implemented common function but it's not working for both.
Here's link to my jsfiddle -jsfiddle.net/xS7zF/1/
In my jsfiddle there are two div tags namely example1 and example2 and both tags have elements of identical ids. Function is working fine for first div but not for second.
please help me to sort out this.
Yeah, under the hood, jQuery selection on an ID will use the Document.GetElementById() function implemented by the browser, which is really fast, but (i guess depending on the browser) will stop after it finds the first element, since ID's should be unique and no further searching is needed after the first one is found.
For instance, rename the divs with id="eb" to class="eb" and you can still target specific elements using $("#example1 .eb") and $("#example2 .eb")
UPDATE:
Using your new Fiddle I created this: http://jsfiddle.net/xS7zF/5/
I cleaned up a lot of code and hopefully you can see what I have done. I changed all elements that appear twice from id to class. Now, when you attach an event to an element using $(".classname").click(), it attaches to all the elements. In the handler function where you set HTML and do your show()/hide(), you don't target a specific element using it's ID, but you find it relative to the element that does the event. You can do this using parent(), parentsUntil(), next(), find(), etc. Check jQuery docs for all possibilities. So for instance, the change-handler attaches to all inputs with name=Assets. But instead of doing $("#b1").show(), I go to the parent of the specific input that fires using $(this).parent(). Then I find the element with a class=".b1", which it will only find the one that is next to this specific input and I set the HTML to just that element.
Since there is another input, the same actions happen when THAT input changes, but instead it finds IT's parent, and finds the element with class=".b1" that is next to IT. So both divs with input are contained since they act on elements relative to itself and not across the document.
For extra fun and to show you how flexible this way of programming is, here is a fiddle with the Javascript-code unchanged, but with the exact same question-div copied 8 times. No matter how many times you repeat this, the same code will act on as many divs as you create since everything works relative. http://jsfiddle.net/xS7zF/7/
Hopefully this helps, the rest is up to you!
ID's must be unique, you should not repeat them. You could replace id with class and in the jQuery function do (".ub").each() or manually referencing the object using eq(x). e.g. (".ub").eq(1).
You shouldn't assign same id's to different elements.
You CAN but you SHOULDN'T. Instead of giving the same id, use class
IDs must be unique, try fix this, change to classes.
You can try something like this:
$("div div:first-child")
instead of
$("#eb")
But depends of the rest of your page code. So, change to classes first and use
$(".eb")
when jQuery / javascript find the first ID it would ignore the rest, please read more about it
http://www.w3schools.com/tags/att_global_id.asp

How can I add a unique ID to each link of a certain class with jquery?

I'm writing something where I find a list of links and generate a save button. I want to prevent the save button from showing on links that are already saved, though, so I plan on giving each of the links a unique ID based on a unique number in the URL of the main links and just disabling it if it's already been saved. I'm not quite sure how I can accomplish this, though.
This is currently what I have:
$(".fl a").after(' Save');
$(".appended").attr('id', $(this).prev().attr("href").split("=")[1]);
There will always be a link that matches that split pattern immediately before a link of the appended class. What is the correct way to achieve this? Apparently I can't use $(this) in this context but I don't know what to do instead.
Use .each():
$(".appended").each(function() {
this.id = $(this).prev().attr("href").split("=")[1];
});
This will iterate over elements with class appended and change the ID accordingly.

How to getElementByID in a specific DIV block (JS or JQUery)

I just wanted a fast/easy/simple way to check for existing ID on a specific element (div in this case)..
Can't seem to find code sample for this..im using jquery but i dont think i need to do jquery on this one, just basic getElement.. but i need to isolate the search inside a div block.. because the id does exist in other elements on the page but i need to know if it exist in a specific area/div.
so instead of just
document.getElementById(target_id);
i need something like:
divName.getElementById(target_id);
or
$("document.divName").getElementById(target_id);
or
$(".divName").document.getElementById(target_id);
Can't seem to find something that works.
IDs are supposed to be unique and no two elements in page should have same id. You may search some element with some class in div with specific ID.
$('#divId .someClass')
or using find()
$('#divId').find('.someClass')
or using context, jQuery( selector [, context ] )
$('.someClass', $('#divId'))
var mySubDiv = myParentDiv.querySelector("#mySubDivId")
is equivalent to
var mySubDiv = document.querySelector("#myParentDivId #mySubDivId");
// don't forget the space : #myParentDiv#mySubDivId won't work
where querySelector and querySelectorAll are very useful functions, enough for me to avoid using jQuery : they accept any css selector
in real life, using the same Id for different DOM elements often happens.
id's should be unique, you can check for element using:
$(".your_parent_div").find("div#some_unique_id");
you can use it for the getElementsByTagName or ClassName, but ID is unique over document. so doesn't need to do that. better to use a special ID.
and in every id define as a element in javascript and you can just write id's name and use it, like this :
ID.style.color = red;
According to my understanding on your question, You have used two id's with same name when u execute, It takes only first ID so you are asking to take id from the specific div, well that is bad type of coding to use two id for same name instead go for class if want to use same name.
solution for your question is -this ->
var someDiv = document.getElementsByClassName("divName");
var someId = someDiv[0].getElementById("target_id");

Jquery doesn't apply hide() to all of the divs with the same ID

I'm making a site, and the html is displayed through php with data fetched from a database.
I have a foreach() function, so all of the things displayed have the same DIV ID's.
It ends up being like 4 DIVs with the same ID (#content), so the PHP works fine, but I have a jQuery script and when I call the jQuery("#content").hide(); it only hides ONE of the DIV's not all of them, and I want it to hide all of them. Is there something else I have to do?
Thanks.
You should use a class (.class_name), not an id--only one DOM element may have a given ID, otherwise it's invalid HTML. It's reasonable for an ID selector to return only a single element.
IDs on elements on a page should be unique. So every HTML tag you specify should have a different ID. If you want to hide all of a certain element, it might be suitable to add a class to the elements you wish to hide?
e.g.
<div class="divToHide">Content...</div>
<div class="divToHide">Content...</div>
<div class="divToHide">Content...</div>
Then your jquery would be:
$(".divToHide").hide();
That's simply because you cannot have more than one element with a specified ID. IDs are and must be unique. Only one single element with the same element may exist in a DOM.
Failing to follow this rule may result in broken scripts and other horrors.
You can use classes for this purpose.
an ID can only be used ONCE in HTML! because its a id and a id should always be Unique

Categories