Question 325031 in Html Question posted in
Some basic documentation can be found here.

Html – document.getElementById{} is returning null

const carousel = document.getElementById("carousel_id");

i am trying to access carousel by this line but i am getting an error that carousel is null. i am pasting the relevant code below. this is the error that i am getting

main.js:96 Uncaught TypeError: Cannot read properties of null (reading 'style')
    at slideVideo (main.js:96:11)
    at HTMLElement.onclick (index.html:1:1)

this is the html code that I am using

<section class="wrapper">
  <i class="fa-solid fa-arrow-left button" id="prev"></i>
  <div class="image-container">
    <div class="carousel" id="carousel_id">
        <video src="../../assests/images/AI Assistant Police-website.mov" autoplay muted loop controls controlsList="nodownload"></video>
        <video src="../../assests/images/AI Legal assisstant.mp4" autoplay muted loop controls controlsList="nodownload"></video>
        <video src="../../assests/images/ai-health.mov" autoplay muted loop controls  controlsList="nodownload"></video>
        <video src="../../assests/images/arab-lady.mp4" autoplay muted loop controls controlsList="nodownload"></video>
        <video src="../../assests/images/arab-men.mp4 human - Trim.mp4" autoplay muted loop controls controlsList="nodownload"></video>
        <video src="../../assests/images/cafe.mp4" autoplay muted loop controls controlsList="nodownload"></video>
        <video src="../../assests/images/digital human - Trim.mp4 human - Trim.mp4" autoplay muted loop controls  controlsList="nodownload"></video>
        <video src="../../assests/images/edited.mp4" autoplay muted loop controls controlsList="nodownload"></video>
    </div>
    <i class="fa-solid fa-arrow-right button" id="next" onclick="slideVideo()"></i>
  </div>
</section>
<script src="../../main.js" ></script>

Below is the javascript code that I am using

function toggleVideoSection(showVideo) {
  const wrapper = document.querySelector(".wrapper");
  wrapper.style.display = showVideo ? "flex" : "none";
}
let videoIndex = 0;
videos = document.querySelectorAll("video");
buttons = document.querySelectorAll(".button");
const wrapper = document.querySelector(".wrapper");
const carousel = document.getElementById("carousel_id");

function slideVideo() {
 videoIndex = videoIndex === videos.length ? 0 : videoIndex < 0 ? videos.length - 1 : videoIndex;
 carousel.style.transform = `translate(-${videoIndex * 100}%)`;
 console.log("hello")
};
const updateClick = (e) => {
 videoIndex += e.target.id === "next" ? 1 : -1;
 slideVideo(videoIndex);
};
buttons.forEach((button) => button.addEventListener("click", updateClick));

i am trying to access the carousel but its not working

Tags:

2

Answers


  1. 0

    Add defer attribute to your script tag. Defer makes sure that your script loads after your html elements. Your script could be loading before the carousel element and that could be the reason why you’re not able to get the element.

    <script src="../../main.js" defer></script>

    I copy-pasted your code into code pen and it didn’t show the error that you’re getting, then i tried copying it into visual studio code and on my local server it also didn’t show the error that you’re getting.

    Login or Signup to reply.
  2. 0

    Another idea is to wrap your JS code with:

    document.addEventListener("DOMContentLoaded", () => {

// JS code here.

});

    Which will ensure your DOM elements are on page before running JS. This will also allow you to pick and choose which JS to run after DOM is loaded.

    OR

    Place your tags just before the closing body tag.

    <html>
  <body>
    HTML_HERE
    <script src=".."></script>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search