After running this simple commands in vscode:
let pageBanner = document.getElementById('page-banner');
console.log(pageBanner);
code runner plugin is installed but WHY output in terminal is this:
PS D:\VSprojs\vs-advanced-one> node "d:\VSprojs\vs-advanced-one\two\script.js"
d:\VSprojs\vs-advanced-one\two\script.js:3
let pageBanner = document.getElementById('page-banner');
^
ReferenceError: document is not defined
at Object.<anonymous> (d:\VSprojs\vs-advanced-one\two\script.js:3:18)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:17:47
in html file there is this:
<body>
<div id="container">
<header>
<div id="page-banner">
<h1 class="title">OpenBook</h1>
<form id="search-books">
<input type="text" placeholder="Search books..." />
</form>
</div>
</header>
in its css file :
#page-banner{
background: #eee ;
padding: 10px 0;
}
#page-banner h1, #page-banner p{
width: 100%;
text-align: center;
margin: 10px 0;
}
#page-banner input{
width: 90%;
max-width: 300px;
margin: 20px auto;
display: block;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
color: #444;
}
I'm a beginner programmer but I know that the document object stores elements of an HTML document such as html, head, body and other HTML tags as objects, my main question is that the output of this problem in vscode is clear and sufficient For a novice programmer?
The document object is a browser API (https://developer.mozilla.org/en-US/docs/Web/API/Document), so if you run your code in node, in there it does not exist. You have to run the code in the browser to be able to use the document object.