I'm a student who have just started learning web for my course in university. I intend to build a web displaying slider by creating multiple slide divs in javascript. My html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Link ionic icon -->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<!-- Link css file -->
<link rel="stylesheet" href="../assets/css/grid.css">
<link rel="stylesheet" href="../assets/css/styles.css">
<!-- jquery hosted by google -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- icon for title -->
<link rel="icon" href="/assets/img/titleBar/rimuru.png" type="image/x-icon"/>
<title>Slime Anime</title>
</head>
<body>
<div id="main">
<!-- Start of header -->
<div id="header">
<!-- Start of nav bar -->
<ul class="header__navbar">
<li class="header__navbar-li"><a href="#" class="header__navbar-li-link">Home</a></li>
<li class="header__navbar-li"><a href="#" class="header__navbar-li-link">Band</a></li>
<li class="header__navbar-li"><a href="#" class="header__navbar-li-link">Tour</a></li>
<li class="header__navbar-li"><a href="#" class="header__navbar-li-link">Contact</a></li>
<li class="header__navbar-li more"><a href="#" class="header__navbar-li-link">
More <ion-icon class="down-icon" name="caret-down"></ion-icon></a>
<div class="header__navbar-subnav">
<a href="#" class="header__navbar-subnav-link">Merchandise</a>
<a href="#" class="header__navbar-subnav-link">Extras</a>
<a href="#" class="header__navbar-subnav-link">Media</a>
</div>
</li>
</ul>
<!-- End of nav bar -->
<!-- Start of search icon -->
<div class="header__search">
<svg class="search-icon" xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
<title>Search</title>
<path d="M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z"/>
</svg>
</div>
<!-- End of search icon -->
</div>
<!-- End of header -->
<!-- Start of slider -->
<div id="slider js__slider">
<!-- using javascript only -->
<div class="clearer"></div>
</div>
<!-- End of slider -->
</div>
<script src="/assets/css/slider.js"></script>
</body>
</html>
My js file:
// create slide constructor
var parrent = document.getElementById("js__slider");
window.onload = function() {
function SlideObject(imgUrl, gradient) {
this.imgUrl = imgUrl;
this.gradient = gradient;
// override toString
SlideObject.prototype.toString = function() {
return gradient + ", " + "url('" + imgUrl + "') top center / cover no-repeat;";
};
}
// declare object
const arr = [
new SlideObject('/assets/img/slider/slider1.jpeg',
"radial-gradient(circle, rgba(241,227,142,0.4038209033613446) 0%, rgba(63,143,116,0.4038209033613446) 30%, rgba(10,20,41,0.9024203431372549) 74%)"),
new SlideObject('/assets/img/slider/slider2.jpeg',
"radial-gradient(circle, rgba(241,227,142,0.4038209033613446) 0%, rgba(63,143,116,0.4038209033613446) 40%, rgba(10,20,41,0.9024203431372549) 97%)"),
new SlideObject('/assets/img/slider/slider3.jpeg',
"linear-gradient(40deg, rgba(241,227,142,0.4038209033613446) 0%, rgba(63,143,116,0.4038209033613446) 46%, rgba(10,20,41,0.9024203431372549) 88%)")
];
for (aSlideStyle of arr) {
let aSlide = document.createElement("div");
// this method for adding only 1 class name
// aSlide.className = "js__slide";
aSlide.setAttribute("class", "js__slide slide fade");
aSlide.style.background = aSlideStyle;
if (parrent != null)
parrent.appendChild(aSlide);
// document.getElementById("slider").appendChild(aSlide);
else
console.log("No");
// $(".js__slider").appendChild(aSlide);
}
// for changing slides on slider
let slideIndex = 0;
changeSlide();
function changeSlide() {
let slides = document.getElementsByClassName('js__slide');
// display "none" for all slides b/f displaying next slide
for (i = 0; i < slides.length; i ++)
slides[i].style.display = "none";
// change to next slide
slideIndex ++;
if (slideIndex >= slides.length) slideIndex = 0;
slides[slideIndex].style.display = "block";
// 2s for changing slide
setTimeout(changeSlide, 2000);
}
}
When I create slide divs without using js, the slider works normally.
<!-- Start of slider -->
<div id="slider js__slider">
<!-- when using normal html and css -->
<div class="slide fade js__slide" style="background: radial-gradient(circle, rgba(241,227,142,0.4038209033613446) 0%, rgba(63,143,116,0.4038209033613446) 30%, rgba(10,20,41,0.9024203431372549) 74%) ,url('/assets/img/slider/slider1.jpeg') top center / cover no-repeat;">
<div class="slide__content">
<h3 class="slide__content-header">Rimuru Tempest</h3>
<p class="slide__content-text">Main, a slime, and a previous human</p>
</div>
</div>
<div class="slide fade js__slide" style="background: radial-gradient(circle, rgba(241,227,142,0.4038209033613446) 0%, rgba(63,143,116,0.4038209033613446) 40%, rgba(10,20,41,0.9024203431372549) 97%) ,url('/assets/img/slider/slider2.jpeg') top center / cover no-repeat;">
<div class="slide__content">
<h3 class="slide__content-header">Rimuru And Friend</h3>
<p class="slide__content-text">King and government of Jura Tempest Federation</p>
</div>
</div>
<div class="slide fade js__slide" style="background: linear-gradient(40deg, rgba(241,227,142,0.4038209033613446) 0%, rgba(63,143,116,0.4038209033613446) 46%, rgba(10,20,41,0.9024203431372549) 88%) ,url('/assets/img/slider/slider3.jpeg') top center / cover no-repeat;">
<div class="slide__content">
<h3 class="slide__content-header">Jura Tempest Federation</h3>
<p class="slide__content-text">View of Monster Federation viewed from sky</p>
</div>
</div>
<!-- using javascript only -->
<div class="clearer"></div>
</div>
I have tried to fix problem on other sites by adding onLoad, putting file to the bottom of the page, use jquery but the getElementById still returns null. I used to think that the bug is from aSlide on for loop, but when using console for debugging, I found that it from getElementById. I still don't know how to fix.
Thank you very much.
