This question already has answers here:
Two elements with the same id, want to select one contained in a specific div
(4 answers)
Closed 6 years ago.
I am creating dynamic <div> blocks with ids that contain i from for loop.
I am getting error if I want to get a specific <div> in dynamic <div>s
Error: Cannot read property 'getElementById' of undefined.
document.getElementById("roomModal_"+i).document.getElementById("modalDialog_"+i).document.getElementById("modalContent_"+i).document.getElementById("modalBody_"+i).document.getElementById("images");
If I just write document.getElementById("images") then I can get it, but the point is that each dynamic <div> block has its own content.
https://jsfiddle.net/oryz8eLs/
Am I missing something?
The getElementById() will return an object and you can't call .document.getElementById on object.
So you can't nest the js selectors as you do now, instead use querySelector like :
var img = document.querySelector("#roomModal_"+i+" #odalDialog_"+i+" #odalContent_"+i+" #odalBody_"+i+" #images");
Since you're using id's and the id should be unique in same document you could just do :
var img = document.querySelector("#images");
//Or
var img = document.getElementById("#images");
To get the element with specific images.
Hope this helps.
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 7 days ago.
I'm trying to get an element which is added by an external application. The only way I can get this specific element is by the data-i18n-key attribute which I thought I can grab like any data attribute so something like this.
The code:
const buttons = document.querySelectorAll('[data-i18n-key="sdk.seamless_product_reward.paid_items_required"]');
console.log(buttons.length);
<span class="lion-reward-item__redeem-button-text lion-loyalty-page-reward-item__redeem-button-text" data-i18n-key="sdk.seamless_product_reward.paid_items_required">Paid items required</span>
However, this doesn't return anything. Any ideas how to do this?
Of course, Barmer is absolutely right. Your code works. The problem will be that your JS is initialised before the DOM has finished loading. Pack your JS above the closing body tag.
This question already has answers here:
Getting the parent div of element
(7 answers)
Find the closest ancestor element that has a specific class
(6 answers)
Closed 3 years ago.
I am trying to work out how to select a container by a link contained within it. It looks something like this:
<div>
<p>Some text here</p>
My Link
</div>
I know the value of "My link". However, the div has no ID or class and is not contained within anything except the body.
How could I use javascript to select the div element so I can manipulate it? I've found ways to select the link using the DOM but not the outer div. There are many divs on the page, so I cannot just select div.
Your help is appreciated!
If the only thing you know is that it's a a as a direct child of a div and it contains the text My Link, you can find it by finding all div > a elements and picking the first one that has that text:
const a = [...document.querySelectorAll("div > a")].find(a => a.innerText === "My Link");
(That relies on the fact that NodeList become iterable a couple of years ago; you may need to polyfill that.)
a will now be the first matching a element, or null if none matched.
From there, if you want that element's container, you can use closest with a CSS selector. For instance:
const x = div.closest("CSS selector here");
...or just use parentNode/parentElement as needed.
This question already has answers here:
jQuery clone duplicate IDs
(9 answers)
Does jQuery('#id').length always return 1?
(7 answers)
Closed 3 years ago.
on page load i have following div
<div id="row_log">......</div>
at this stage if i do console.log($('#row_log').length); then i get response as 1 which is correct.
however, i have button to clone the same div, which works fine. So if the button was clicked thrice, i would now have :
<div id="row_log">.....</div> original div
<div id="row_log">.....</div> cloned div
<div id="row_log">.....</div> cloned div
<div id="row_log">.....</div> cloned div
yet console.log($('#row_log').length); would still show as 1 instead of 4
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
Use class.
Important points :
1. Id's must be unique.
2. In case of duplicate id's JavaScript will always get the first element for you, hence the length 1.
If you are just building a dynamic list or something, you can instead use a class.
......
And then do document.getElementsByClassName(className)
This question already has answers here:
How to get element by class name? [duplicate]
(4 answers)
Get Element By Classname Script Not Working
(4 answers)
Closed 5 years ago.
Sorry for a stupid question, but maybe someone can explain it to me. On w3school web-site you can find a modal example. And in order to close the modal they use the following line of code:
HTML:
<span class="close">×</span>
Script:
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
Why to use array here? I tried this code without this array and it doesn’t work. I tried to use different indexes in this array and it also doesn’t work.
Why do we use [0] here and how does it exactly work?
According to Mozilla developer documentation, it returns an array of child elements.
Returns an array-like object of all child elements which have all of the given class names. When called on the document object, the complete document is searched, including the root node. You may also call getElementsByClassName() on any element; it will return only elements which are descendants of the specified root element with the given class names.
In your case, you have only one DOM element having class 'close'. That's why it returns an array of one element.
Because you can assign a class to more than one element in your HTML document. getElementsByClassName does exactly that: An array of all HTML elements which got the given class assigned to them. The [0] picks the first (and in your case only) element from that array.
If you want to give an unique identifier to a HTML element, assign an id to it and use getElementById.
<span id="close">×</span>
var span = document.getElementById("close");
This question already has answers here:
.getElementByClassName not working? [duplicate]
(2 answers)
Closed 7 years ago.
Im trying to make all my div class elements to lose all its content by replacing their current content with nothing "".
document.getElementsByClassName("sprint_column").innerHTML = "";
But nothing happens with the "sprint_column" when im trying to reach the class, However if i try to reach the IDs it works:
document.getElementsById("div3_Score").innerHTML = "";
Here is the code where the Ids and Classes is created:
<div class='sprint_column' id='div3_".$team."'>Sprint 1</div>
Is there any way to clear all content from a class with "getElementsByClassName" or do i have to loop through all ID elements and clear them one by one?
getElementsByClassName returns an array of DOM elements. You need to iterate through them, e.g. via a for loop, and change the innerHTML one by one.