Why the script doesn't find the element by id in Joomla?

There is a script and it's working, but in joomla why it does not finds the element by id. Classes and tags items are defined. This line console.log(document.getElementById('arrowRight')); outputs null.
March 23rd 20 at 19:26
1 answer
March 23rd 20 at 19:28
Solution
document.addEventListener('DOMContentLoaded', function() {
 var Left = document.getElementById('arrowLeft'),
 Right = document.getElementById('arrowRight'),
 sliderLine = document.getElementById('sliderLine'),
 sliderItem = document.getElementsByClassName('sliderItem')[0],
 left = 0;

 function arrowLeft(){
console.log(sliderItem);
 widthSliderItem = sliderItem.offsetWidth;
 left = left - widthSliderItem;
 if(left >= -2*widthSliderItem){
 sliderLine.style.left = left + 'px';
}else{
 sliderLine.style.left = 0 + 'px';
 left = 0;
}
}
 function arrowRight(){
 left = left + 950;
 if(left <= 0){ 
 sliderLine.style.left = left + 'px';
}else{
 left = 0;
}
}
});
the element is static. There is a slider with arrows, which they rated id by clicking on the slider button moves, but this is not happening. - frankie commented on March 23rd 20 at 19:31
@frankie, it's Hard to say without code snippets - Jazmyne.Gottlieb commented on March 23rd 20 at 19:34
var Left = document.getElementById('arrowLeft'),
 Right = document.getElementById('arrowRight'),
 sliderLine = document.getElementById('sliderLine'),
 sliderItem = document.getElementsByClassName('sliderItem')[0],
 left = 0;

function arrowLeft(){
console.log(sliderItem);
 widthSliderItem = sliderItem.offsetWidth;
 left = left - widthSliderItem;
 if(left >= -2*widthSliderItem){
 sliderLine.style.left = left + 'px';
}else{
 sliderLine.style.left = 0 + 'px';
 left = 0;
}
}
function arrowRight(){
 left = left + 950;
 if(left <= 0){ 
 sliderLine.style.left = left + 'px';
}else{
 left = 0;
}
}
- frankie commented on March 23rd 20 at 19:37
@frankie, the script is clear and the layout? - Jazmyne.Gottlieb commented on March 23rd 20 at 19:40
<div class="slider">
 <div id="arrowLeft"><img src="/templates/ipsystem/img/arrowLeft.png" alt=""></div>
 <div class="sliderWrap"> 
 <div id="sliderLine">
 <div class="sliderItem">
 <div class="window"></div>
 <div class="description">
 <p><b>Living room with lighting 24m2</b> <br>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.</p>
 <div class="price"> <b>Price:</b> <span class="blueFont">1500 R.</span> <button class="yellowBtn">WANT a</button></div>
</div>
 <div class="photoLine" n="0">
 <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
 <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
 <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
 <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
 <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
</div>
</div>
 <div class="sliderItem"> 
 <div class="window"></div>
 <div class="description">
 <p><b>Living room with lighting 24m2</b> <br>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.</p>
 <div class="price"><b>Price:</b> <span class="blueFont">1500 R.</span> <button class="yellowBtn">WANT a</button></div>
</div>
 <div class="photoLine" n="1"> 
 <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
 <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
 <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
 <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
 <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
</div>
</div>
 <div class="sliderItem"> 
 <div class="window"></div>
 <div class="description">
 <p><b>Living room with lighting 24m2</b> <br>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.</p>
 <div class="price">Price: <span class="blueFont">1500 R.</span> <button class="yellowBtn">WANT a</button></div>
</div>
 <div class="photoLine" n="2">
 <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
 <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
 <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
 <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
 <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
</div>
</div>
 </div> 
</div>
 <div id="arrowRight"><img src="/templates/ipsystem/img/arrowLeft.png" alt="" onclick=""></div>
 </div>
- frankie commented on March 23rd 20 at 19:43
@frankie, wait, you wrapped the script in the document.addEventListener('DOMContentLoaded', () => {}); ? Without this he will not see these items - Jazmyne.Gottlieb commented on March 23rd 20 at 19:46
Thank you! Works! With joomla just met yesterday and all the nuances I do not know. - frankie commented on March 23rd 20 at 19:49
@frankie, can you would mark the answer as solution? - Jazmyne.Gottlieb commented on March 23rd 20 at 19:52
@frankie, and, by the way, this is not the nuances of Joomla, it is the nuances of JS. The script you need to wait (DOMContentLoaded), while will load all the elements on the page and then you can select them - Jazmyne.Gottlieb commented on March 23rd 20 at 19:55

Find more questions by tags JoomlaJavaScript