HTML code
HTML file Name index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Counter</title>
<script src="counter_funtions.js"></script>
<link rel="stylesheet" href="Style.css" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<div class="d-flex flex-row justify-content-center padding">
<div class="text-center transparent p-4">
<div>
<h1 class="heading">Counter</h1>
<p class="numbers" id="counterValue">0</p>
<div>
<button class="button" onclick="onDecrement()">DECREASE</button>
<button class="button" onclick="onReset()">RESET</button>
<button class="button" onclick="onIncrement()">INCREASE</button>
</div>
</div>
</div>
</div>
</body>
</html>
JS Code
JS file name counter_funtions.js
let counterElement = document.getElementById("counterValue");
console.log(counterElement);
and the output is
[Running] node "d:JavaSciptProject-3 Counter Appcounter_funtions.js"
d:JavaSciptProject-3 Counter Appcounter_funtions.js:1
let counterElement = document.getElementById("counterValue");
^
ReferenceError: document is not defined
at Object.<anonymous> (d:JavaSciptProject-3 Counter Appcounter_funtions.js:1:22)
at Module._compile (node:internal/modules/cjs/loader:1369:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
at Module.load (node:internal/modules/cjs/loader:1206:32)
at Module._load (node:internal/modules/cjs/loader:1022:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12)
at node:internal/main/run_main_module:28:49
Node.js v20.12.2
[Done] exited with code=1 in 0.083 seconds
trying to Run JS code expecting 0 as output.