Why am I getting null in the console in JavaScript? [duplicate] - javascript

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 9 months ago.
I want the div to be output in the console but I am getting 'null' in the console.
This is my HTML ->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="two_js.js"></script>
<title>:)</title>
</head>
<body>
<div id="main" class="container">
This is my HTML Body.
</div>
</body>
</html>
This is my JavaScript ->
let main = document.getElementById('main');
console.log(main);
What should I do?

Put your script tag inside and at the bottom of body tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>:)</title>
</head>
<body>
<div id="main" class="container">
This is my HTML Body.
</div>
<script src="two_js.js"></script>
</body>
</html>

Related

How should I display header and footer on other than 'Home' page?

Should I do traditional copy paste the header and footer on every page, or is there any way that I can display it using JavaScript on every page!
Just expecting that if I would save some kilobytes on my .html files by rendering my header and footer on each page via JavaScript?
I agree that it will make life lot simpler, but in response to your query, utilise javascript as follows.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type=module src="./index.js"></script>
</head>
<body>
<my-header></my-header>
<h1>Home Page</h1>
<my-footer></my-footer>
</body>
</html>
about.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type=module src="./index.js"></script>
</head>
<body>
<my-header></my-header>
<h1>About Page</h1>
<my-footer></my-footer>
</body>
</html>
contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type=module src="./index.js"></script>
</head>
<body>
<my-header></my-header>
<h1>Contact Page</h1>
<my-footer></my-footer>
</body>
</html>
index.js
class MyHeader extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<header>
<nav>
<ul>
<li><a href=index.html>Home</a></li>
<li><a href=about.html>About</a></li>
<li><a href=contact.html>Contact</a></li>
</ul>
</nav>
</header>`;
}
}
customElements.define("my-header", MyHeader);
class MyFooter extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<footer>
© 2022 My Company
</footer>`;
}
}
customElements.define("my-footer", MyFooter);
Hope this helps you.
I would seriously recommend using a frontend framework, such as Angular, Vue, Svelte, etc. You can create components for your headers and footers and then reused these across multiple places.

How do I source files on a custom html tag?

I am trying to create my own computer language but can't get the src attribute to work. Is there a way to get the source code to "paste" to the inner text of the element?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<h1 id="p"></h1>
<space-lang src="Testing.txt">
</space-lang>
</head>
<body>
<script src="space.js">
</script>
</body>
</html>

Why isn't my evaluate function being called on click? [duplicate]

This question already has answers here:
JS function named `animate` doesn't work in Chrome, but works in IE
(3 answers)
Closed 1 year ago.
I am new to JS so please bear with me :)
below is the code but on clicking it does not trigger the function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button type="submit" onclick="evaluate()">Submit</button>
</body>
<script type="text/javascript">
function evaluate(){
document.write("Working");
};
</script>
</html>
evaluate() is a reserved function in JavaScript. Name your function something else.
The fact that the console error mentioned the need for two arguments was a clue that the function was defined somewhere already, and that your definition wasn't being considered.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button type="submit" onclick="notEvaluate()">Submit</button>
</body>
<script type="text/javascript">
function notEvaluate() {
document.write("Working");
};
</script>
</html>
Regarding document.write, see Why is document.write considered a "bad practice"?.
Try using a function name different than "evaluate" - evaluate is a reserved function name

Image is not displayed in print preview

I am learning print.js, but I am having trouble printing the image. I tried to called printJS but the image is not displayed in the print preview.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://printjs-4de6.kxcdn.com/print.min.css"/>
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<title>Document</title>
</head>
<body>
<image src="test-01.jpg"/>
<button type="button" onclick="printJS('test-01.jpg','image')">
Print
</button>
</body>
</html>

threejs cannot be found

Hi I am trying to build the "get started" application from the threejs website. https://threejs.org/docs/index.html#manual/introduction/Creating-a-scene
I made a html like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>BIM Demo</title>
<script>"/js/three.min.js"</script>
<script type="module" src="./js/view.js"></script>
</head>
<body>
<h1>BIM DEMO</h1>
</body>
</html>
I specified my view.js as a module since I want to be able to use the import statement to import my typescript files, but when I try to show my application in the browser I get the message THREE not found.
I tried adding it with yarn but it does not work.
This is my structure
Your three.min.js file is wrongly included. Your HTML should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>BIM Demo</title>
<script type="text/javascript" src="./js/three.min.js"></script>
<script type="text/javascript" src="./js/view.js"></script>
</head>
<body>
<h1>BIM DEMO</h1>
</body>
</html>

Categories