the keyword document is not defined

tried to read and learn some code from github

so I copied below link and tried to run it on my intellij

https://github.com/bradtraversy/50projects50days/tree/master/background-slider

but when I run the code it said "Document is not defined" which refers to the keyword* "document.getElementById"* )

I googled it and it said I am running the code in a server side application like node.js

but I feel like I am not on the server side since I got the html, js(not node js ) and css files in the same folder and they are copied straight from the GitHub and to my sheet.

but when I run some test code as below on my script.js

if (typeof window === "object") {
  // code is running in a browser environment
} else {
  // code is running in a non-browser environment
}

it said I am running in a non-browser environment

what is wrong with my environment setting ???

am I missing some plugin?

and should I use a library or framework that provides a document-like object in a non-browser environment? if so, any recommendations?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
          integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
          crossorigin="anonymous"
  />
  <link rel="stylesheet" href="style.css" />
  <title>Background Slider</title>
</head>
<body>
<div class="slider-container">
  <div
          class="slide active"
          style="
          background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80');
        "
  ></div>
  <div
          class="slide"
          style="
          background-image: url('https://images.unsplash.com/photo-1511593358241-7eea1f3c84e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1934&q=80');
        "
  ></div>

  <div
          class="slide"
          style="
          background-image: url('https://images.unsplash.com/photo-1495467033336-2effd8753d51?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80');
        "
  ></div>

  <div
          class="slide"
          style="
          background-image: url('https://images.unsplash.com/photo-1522735338363-cc7313be0ae0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2689&q=80');
        "
  ></div>

  <div
          class="slide"
          style="
          background-image: url('https://images.unsplash.com/photo-1559087867-ce4c91325525?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80');
        "
  ></div>

  <button class="arrow left-arrow" id="left">
    <i class="fas fa-arrow-left"></i>
  </button>

  <button class="arrow right-arrow" id="right">
    <i class="fas fa-arrow-right"></i>
  </button>
</div>
<script src="hello.js"></script>
</body>
</html>

Solution

How to make the project work

Put the 3 files in the same folder.
Open a browser, e.g. Google Chrome
Throw the .html file into the browser window.

How to edit the files

I am not sure why you are using InteliJ: I am not familiar with using this for Javascript/HTML. Probably it will work for editing, but let me suggest trying VS Code which is free and widely used for the HTML/JS/CSS combination. To edit the files in that:

Install Visual Studio Code and open it.
Drag the containing folder of the 3 files, into the VS Code window.
The 3 files will be listed in the left panel: click on any of them to edit in VS Code, and press Control-S to save.
Once you have saved an update, go to the browser window and press F5.

To view the "output" of the program, I personally always use a browser, e.g. Google Chrome, rather than any command line tool. These projects should always work, and work simply and easily, in a browser. Whether they work in a command line tool depends on the tool, and what it is set up to do. Some tools will open a browser window for you. But why not just open the window yourself and that way it is easier to understand what is happening.

Once you have the editing process working in VS Code, feel free to try editing in IntelliJ. I am assuming that will also work. However, I am guessing that you are being confused by any buttons in IntelliJ for "running" the code. They are intended to run programs that are not the "child" of a web page, but rather are called directly. For Javascript, typically such programs are in Node JS. However the code you present is not intended to be run in Node JS environment.

How to make the project work here in Stack Overflow

In a simple .html/.js/.css project like this, you can often make it work here just within Stack Overflow. This is not the best way to edit a program in general, but makes it easy for people to reproduce your problem and help you.

To do that, while typing your question, click the small "<>" icon above the text entry box. That opens a window with 4 panels. Into the corresponding 3 panels, paste in your HTML, JS and CSS code. Then click the big blue button to "Run" the code.

That will give you this:

const body = document.body
const slides = document.querySelectorAll('.slide')
const leftBtn = document.getElementById('left')
const rightBtn = document.getElementById('right')

let activeSlide = 0

rightBtn.addEventListener('click', () => {
  activeSlide++

  if (activeSlide > slides.length - 1) {
    activeSlide = 0
  }

  setBgToBody()
  setActiveSlide()
})

leftBtn.addEventListener('click', () => {
  activeSlide--

  if (activeSlide < 0) {
    activeSlide = slides.length - 1
  }

  setBgToBody()
  setActiveSlide()
})

setBgToBody()

function setBgToBody() {
  body.style.backgroundImage = slides[activeSlide].style.backgroundImage
}

function setActiveSlide() {
  slides.forEach((slide) => slide.classList.remove('active'))

  slides[activeSlide].classList.add('active')
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  background-position: center center;
  background-size: cover;
  transition: 0.4s;
}

body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: -1;
}

.slider-container {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  height: 70vh;
  width: 70vw;
  position: relative;
  overflow: hidden;
}

.slide {
  opacity: 0;
  height: 100vh;
  width: 100vw;
  background-position: center center;
  background-size: cover;
  position: absolute;
  top: -15vh;
  left: -15vw;
  transition: 0.4s ease;
  z-index: 1;
}

.slide.active {
  opacity: 1;
}

.arrow {
  position: fixed;
  background-color: transparent;
  color: #fff;
  padding: 20px;
  font-size: 30px;
  border: 2px solid orange;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.arrow:focus {
  outline: 0;
}

.left-arrow {
  left: calc(15vw - 65px);
}

.right-arrow {
  right: calc(15vw - 65px);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
  <link rel="stylesheet" href="style.css" />
  <title>Background Slider</title>
</head>

<body>
  <div class="slider-container">
    <div class="slide active" style="
          background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80');
        "></div>
    <div class="slide" style="
          background-image: url('https://images.unsplash.com/photo-1511593358241-7eea1f3c84e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1934&q=80');
        "></div>

    <div class="slide" style="
          background-image: url('https://images.unsplash.com/photo-1495467033336-2effd8753d51?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80');
        "></div>

    <div class="slide" style="
          background-image: url('https://images.unsplash.com/photo-1522735338363-cc7313be0ae0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2689&q=80');
        "></div>

    <div class="slide" style="
          background-image: url('https://images.unsplash.com/photo-1559087867-ce4c91325525?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80');
        "></div>

    <button class="arrow left-arrow" id="left">
        <i class="fas fa-arrow-left"></i>
      </button>

    <button class="arrow right-arrow" id="right">
        <i class="fas fa-arrow-right"></i>
      </button>
  </div>
  <script src="script.js"></script>
</body>

</html>

In the code above, which I have copied and pasted directly from the Brad Traversy github, there are two statements in the .html file that are needed for normal browser use, but are not needed in the Stack Overflow emulator.

<link rel="stylesheet" href="style.css" />

and

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

These statements tell the browser that is reading the .html file where to look for the .css and .js files.

When you are running it in the Stack Overflow snippet editor, that snippet editor automatically secretly inserts equivalent statements into your HTML, so that the 3 panels are linked together, without you specifically giving the 3 panels actual filenames. So when pasting into Stack Overflow's snippet editor, you don't need those statements. If you leave those statements in, the browser fails to find the files you explicitly pasted in (because you have not given them explicit names) but does find them through the secret automatic process of linking the CSS and JS to the parent HTML, so it still works.