document.getElementById | document is not defined-CodePudding

I have an on/off switch on my website but when I use document.getElementById it says "document is not defined". Is there another way I can get an element from another file without document?

var cb = document.getElementById("cmn-toggle-2");
cb.onchange = function() {
  if (cb.checked) console.log('The Switch is ON!');
  else console.log('The Switch is OFF!');
}

.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}

.cmn-toggle label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}

input.cmn-toggle-round label {
  padding: 2px;
  width: 120px;
  height: 60px;
  background-color: #dddddd;
  border-radius: 60px;
}

input.cmn-toggle-round label:before,
input.cmn-toggle-round label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}

input.cmn-toggle-round label:before {
  right: 1px;
  background-color: #f1f1f1;
  border-radius: 60px;
  transition: background 0.4s;
}

input.cmn-toggle-round label:after {
  width: 58px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: margin 0.4s;
}

input.cmn-toggle-round:checked label:before {
  background-color: #8ce196;
}

input.cmn-toggle-round:checked label:after {
  margin-left: 60px;
}

<div style="text-align: center;">
  <div >
    <input id="cmn-toggle-2"  type="checkbox">
    <label for="cmn-toggle-2"></label>
  </div>
</div>

CodePudding user response：

From what you told me on the comments the problem is that your code is running on node and not on a browser.

document is an object the exists only in the browser, that is why you are getting the document is not defined error.

The solution for this problem is to split your code into two parts: backend code (which will run on node), and frontend code (which will run in the browser).

Typical things for your backend (server-side) code is your server js, for instance with express. You can handle routes, get data. This code will only run on the server!

Typical things for frontend code are user interactions, like button clicks, add value from inputs, catch events, ... This code will only run on the browser!

You could look into something like JSDOM, but i don't think that would be the best option for you

CodePudding user response：

The document object is an essential part of javascript so I don't recommend not using it if you are willing to learn more.

If your code (i.e your html, js and css files) are in the same directory (folder) then, this should work. Make sure that your script tag is at the end of the body.

HTML file (I named it index.html - this doesn't really matter):

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Title</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div style="text-align: center;">
    <div >
      <input id="cmn-toggle-2"  type="checkbox">
      <label for="cmn-toggle-2"></label>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

Your Javascript file (you can also write it inbetween the script tags in the HTML file if you want to).

I named this script.js which matches the src in the HTML tag.

var cb = document.getElementById("cmn-toggle-2");
cb.onchange = function() {
  if (cb.checked) console.log('The Switch is ON!');
  else console.log('The Switch is OFF!');
}

Also the button doesn't seem to be formatted correctly and it's irritating me a bit so I went and fixed it at line 41.

This file I named style.css which matches the link tag in the head of the HTML document

input.cmn-toggle-round label:after {
    width: 62px;
    background-color: #fff;
    border-radius: 100%;
    box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
    transition: margin 0.4s;

Honestly, this toggle is very cool and I might use it in the future.