How get document.getElementById when I add this id in previous JS [closed]
How get document.getElementById when I add this id in previous JS [closed]
I have added an id to all elements with a class of image using JS.
The images now have ids eg. image--1, image--2, etc
image--1
image--2,
If I want to get the element by ID using var el = document.getElementById('image--1'); then I get null.
var el = document.getElementById('image--1');
How can I get current DOM in pure JS?
This question appears to be off-topic. The users who voted to close gave this specific reason:
Please visit the help center, take the tour to see what and How to Ask. Do some research, search for related topics on SO; if you get stuck, post a Minimal, Complete, and Verifiable example of your attempt, noting input and expected output.
– mplungjan
Sep 3 at 9:21
3 Answers
3
You can use the setAttribute() method to reliably set the id of image elements, via vanillajs.
setAttribute()
Something to also keep in mind here is that the image elements need to be defined and present in the DOM before your javascript executes.
With these two things in mind, consider the following code - you could do something along these lines to achieve what you're after;
<html>
<head>
</head>
<body>
<!-- DEFINE BEFORE SCRIPT -->
<img class="img" src="/yourimage0.jpg" />
<img class="img" src="/yourimage1.jpg" />
<!-- DEFINE SCRIPT AFTER IMAGE ELEMENTS -->
<script>
var id = 1;
// Use the querySelectorAll method to select collection of your
// image elements
for(var img of document.querySelectorAll(".img"))
// Set the id attribute in this way, using the setAttribute method
img.setAttribute("id", "image--" + id);
id++;
// You can now access the element by id with the following
var el = document.getElementById('image--1');
</script>
</body>
</html>
This works. Please explain where your code differs
document.querySelectorAll(".img").forEach(function(img,i)
img.id="image--"+i;
)
document.getElementById('image--1').src = "https://via.placeholder.com/350x150?text=Image1";
<img class="img" src="https://via.placeholder.com/350x150" />
<img class="img" src="https://via.placeholder.com/350x150" />
<img class="img" src="https://via.placeholder.com/350x150" />
Dynamically:
// create the images:
var container = document.getElementById("container");
for (var i=0;i<3;i++)
var img = document.createElement("img");
img.src="https://via.placeholder.com/350x150";
img.classList.add("img");
container.appendChild(img);
document.querySelectorAll(".img").forEach(function(img,i)
img.id="image--"+i; // makes more sense to do that in the creation part too
)
document.getElementById('image--1').src = "https://via.placeholder.com/350x150?text=Image1";
<div id="container"></div>
my mistake! sorry about that
– Dacre Denny
Sep 3 at 9:34
I guess you are using web frameworks like Vue.js or React.js, then this is because of virtual DOM, which means you can't get these elements before they are mounted to real DOM. If so, you should get these element in componentDidMount function.
I am understanding the OP's question so that he uses pure JS. Hence, I doubt that this is the solution.
– Binarus
Sep 3 at 9:54
no we use pure js for wordpress site without jquery
– Kady
Sep 4 at 11:04
Nobody can help you, if you don't provide any code.
– elasticman
Sep 3 at 9:16