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.
Related
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>
I have here a Chrome Extension and can not import anything to my main (index.mjs) script into it.
index.mjs File:
import Browser from "webextension-polyfill";
const port = Browser.runtime.connect();
index.html File:
<!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>
<div>
<input id="input-el" type="text">
<button id="submit-btn"> submit </button>
</div>
<div id="content-El"></div>
<script src="index.mjs"></script>
</body>
</html>
Error: Uncaught SyntaxError: Cannot use import statement outside a module [index.mjs:1]
I tried to a lot of things.
type="module" in my html
rename file ending to mjs & js
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
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?
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>