Menu
Community /Pin to ProfileBookmark
@daveyerwinJan 22.2021 — #
can't really say without seeing your code but
generally I would say
innerHTML should always be thought of as "READ ONLY"
use document.createElement('img')
then set img src to src of image
@DaveyErwin#1627029 thank you very much, I'll try that way. Here's my code - https://drive.google.com/file/d/1BiZSk8IZW9tPsUvdiijBMLw07eOWycmQ/view?usp=sharing @_Yar_#1627041 Please don't post code as an image. Copy and paste the text and use code tags: ` @_Yar_#1627041 I agree with Sempervivum, please share your code, not an image of the code.@Sempervivum#1627044 okay, thank you.
` or triple backtics.
I edited your posting accordingly.
Can’t access images added to HTML, shows an empy nodeList
Hi everyone! Please help me to figure this one out.
I’m trying to add images with **innerHTML**DOMContentLoaded**nodeList
Thanks in advance!!
Here’s the [code
Sign in
to post a comment11 Comments(s) ↴
0
@daveyerwinJan 22.2021 — #can't really say without seeing your code but
generally I would say
innerHTML should always be thought of as "READ ONLY"
use document.createElement('img')
then set img src to src of image
reply?
0
@_Yar_authorJan 22.2021 — #reply?
0
@SempervivumJan 22.2021 — #your code herereply?
0
@VITSUSAJan 22.2021 — #reply?
0
@_Yar_authorJan 22.2021 — #<i>
</i>let slidesContainer;
let switchBtns;
let popupText;
let slideImages;
slidesContainer = document.querySelector('.img-slides');
popupText = document.querySelector('.pop-up-text');
slideImages = slidesContainer.querySelectorAll('.slide-box_img');
switchBtns = document.querySelectorAll('.switch-btn');
// * Loading default items
let slides = [
[
<span><code>&lt;img class="slide-box_img" src="./img/slide1.jpg" alt="slide"&gt;</code></span>,
<span><code>&lt;img class="slide-box_img" src="./img/slide2.jpg" alt="slide"&gt;</code></span>,
<span><code>&lt;img class="slide-box_img" src="./img/slide3.jpg" alt="slide"&gt;</code></span>
],
[
<span><code>&lt;img class="slide-box_img" src="./img/slide4.jpg" alt="slide"&gt;</code></span>,
<span><code>&lt;img class="slide-box_img" src="./img/slide5.jpg" alt="slide"&gt;</code></span>,
<span><code>&lt;img class="slide-box_img" src="./img/slide6.jpg" alt="slide"&gt;</code></span>
],
[
<span><code>&lt;img class="slide-box_img" src="./img/slide7.jpg" alt="slide"&gt;</code></span>,
<span><code>&lt;img class="slide-box_img" src="./img/slide8.jpg" alt="slide"&gt;</code></span>,
<span><code>&lt;img class="slide-box_img" src="./img/slide9.jpg" alt="slide"&gt;</code></span>
]
];
let loadOne, loadTwo, loadThree;
loadOne = slides[0].join('');
loadTwo = slides[1].join('');
loadThree = slides[2].join('');
// * Loading the first load of images
window.addEventListener('DOMContentLoaded', ()=>{
slidesContainer.innerHTML = loadOne;
document.querySelector('.left').style.backgroundColor = 'rgb(4, 134, 128)';
});
console.log(slideImages); // ------ shows an empty nodeList
// * Switch Slides-Images
switchBtns.forEach((btn)=>{
btn.addEventListener('click', (e)=>{
let target = e.currentTarget;
if(target.classList.contains('left')){
slidesContainer.innerHTML = loadOne;
document.querySelector('.left').style.backgroundColor = 'rgb(4, 134, 128)';
document.querySelector('.center').style.backgroundColor = 'white';
document.querySelector('.right').style.backgroundColor = 'white';
}
<i> </i>if(target.classList.contains('center')){
<i> </i> slidesContainer.innerHTML = loadTwo;
<i> </i> document.querySelector('.center').style.backgroundColor = 'rgb(4, 134, 128)';
<i> </i> document.querySelector('.left').style.backgroundColor = 'white';
<i> </i> document.querySelector('.right').style.backgroundColor = 'white';
<i> </i>}
<i> </i>if(target.classList.contains('right')){
<i> </i> slidesContainer.innerHTML = loadThree;
<i> </i> document.querySelector('.right').style.backgroundColor = 'rgb(4, 134, 128)';
<i> </i> document.querySelector('.center').style.backgroundColor = 'white';
<i> </i> document.querySelector('.left').style.backgroundColor = 'white';
<i> </i>}
})
})reply?
0
@SempervivumJan 22.2021 — #Single backtics don't work reliably when posting code. You should use code tags: your code hereI edited your posting accordingly.
reply?
0
@SempervivumJan 22.2021 — #There are two reasons for this issue:// * Loading the first load of images
window.addEventListener('DOMContentLoaded', ()=>{
slidesContainer.innerHTML = loadOne;
document.querySelector('.left').style.backgroundColor = 'rgb(4, 134, 128)';
});
console.log(slideImages); // ------ shows an empty nodeListYou are presetting the innerHTML of slidesContainer inside the eventlistener for DOMContentLoaded. It will take a bit of time until this event fires. If you log the variable slideImages right after adding the event listener it is not yet preset.
>The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.
Your code presets the variable slideImages at the beginning when its innerHTML is not yet set. As this node list is not live it will remain empty even if you set the innerHTML later.
BTW: Your code can be simplified and shortened a bit:
let slidesContainer = document.querySelector('.img-slides');`instead of
let slidesContainer;
slidesContainer = document.querySelector('.img-slides');// switchBtns.forEach((btn)=>{
document.addEventListener('click', (e)=>{
let target = e.currentTarget;
if(target.classList.contains('left')){
slidesContainer.innerHTML = loadOne;
document.querySelector('.left').style.backgroundColor = 'rgb(4, 134, 128)';
document.querySelector('.center').style.backgroundColor = 'white';
document.querySelector('.right').style.backgroundColor = 'white';
}
if(target.classList.contains('center')){
slidesContainer.innerHTML = loadTwo;
document.querySelector('.center').style.backgroundColor = 'rgb(4, 134, 128)';
document.querySelector('.left').style.backgroundColor = 'white';
document.querySelector('.right').style.backgroundColor = 'white';
}
if(target.classList.contains('right')){
slidesContainer.innerHTML = loadThree;
document.querySelector('.right').style.backgroundColor = 'rgb(4, 134, 128)';
document.querySelector('.center').style.backgroundColor = 'white';
document.querySelector('.left').style.backgroundColor = 'white';
}
})
//})reply?