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

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

Related

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 am I getting null in the console in JavaScript? [duplicate]

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>

Getting Uncaught ReferenceError: exports is not defined

I am taking an input value from one page and on clicking a button I want to display it on another page in HTML.
I have exported my onclick function from one ts file and imported it in another.
Here's my TypeScript code for exporting:
var txt: HTMLInputElement=<HTMLInputElement>document.getElementById("text");
var dis=document.getElementById("dis")
export function send(){
return txt.value
}
here's the HTML for the same:
<!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>
<link rel="stylesheet" href="menu bar.css">
<script src="cart.js" defer></script>
</head>
<body>
<input type="text" name="Number" id="text">
<button onclick="send();"></button>
<p id="dis"></p>
</body>
</html>
The importing page HTML is this:
<!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="import.js" defer></script>
<title>Document</title>
</head>
<body>
<p id="display"></p>
</body>
</html>
And here's the TypeScript for it:
import { send } from "./main/cart";
var p =document.getElementById("display")
p.innerHTML+=send()
But I am getting Uncaught ReferenceError: exports is not defined
Most browser support commonjs modules. So you need to compile using babel if you code like that.
Here you can either use babel or write below codes.
module.exports = function send(){ //codes };
And import as....
let send = require("./main/cart");
Other code remains the same.

Does script tag create new execution context?

When we load external script does this script (aka module) create new execution context?
My index html file.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html>
My app.js file
function test() {
debugger;
}
test();
In bellow screen shot call stack status when inside test function. Is this anonymous reflection of my app.js file's Execution Context?

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