How do I allow my window to open and there be the text the user inputs?
Question
I want the user to be able to open the website and there will be a prompt that will ask the user to tell them about themselves and the text they input display in a new window?
<html> <head> <script> var text = prompt("Tell us something about yourself "); function newWindow() { var OpenWindow = window.open("", "slayyyter", "height=300 , width=300"); } function showText() { OpenWindow.document.write(text); } </script> </head> <body> <button onclick="showText()">A</button> </body> </html>
3 answers
solution1
1 2019-05-14 23:27:48
The code has three errors in it. Open the web console (typically by pressing F12) to see messages for some of them.
The prompt string
"Tell us something about yourself"has a line feed in it that needs to be removed,
The variable
OpenWindowdeclared innewWindowis not in scope of the code insideshowText. If declaringOpenWindowglobally, removevarbefore the variable name insidenewWindowto prevent the global variable being shadowed by a local declaration.newWindowneeds to be called
Here's an example that returns the window object instead of saving it in a global variable:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Test</title>
<head>
<script>
"use strict";
var text = prompt("Tell us something about yourself");
function newWindow() {
return window.open("", "slayyyter",
"height=300 , width=300");
}
function showText() {
var openWindow = newWindow();
newWindow().document.write(text);
newWindow.close();
}
</script>
</head>
<body>
<button onclick="showText()"> A </button>
</body>
</html>
Note
document.writeis useful for learning exercises in JavaScript, but calldocument.closeto finalize a document after writing to it - it stops the window loading indicator in opened windows.Seach on "HTML5 document type declaration", "Declaring the character set in HTML" and "when to use strict mode in JavaScript" for more information.
solution2
0 ACCPTED 2019-05-14 21:56:27
You'll want to use your browser's tools and JavaScript console, which on button click says that OpenWindow is not defined. This is because of scope. OpenWindow only exists where you define it - inside function newWindow. To access it in other functions declare it outside (right under var text will do). You can leave it defined but blank, then assign it later. So under the declaration of "text" just put var OpenWindow; . Then inside newWindow delete "var" from in front of OpenWindow. You may have other issues as I have not tested the code, but that's the main one.
Hints:
- read up on scope
- read up on browser debug tools, especially JS console
- do your tutorials in http://jsfiddle.net or something similar, and you can share examples here when you ask for help.
solution3
0 2019-05-14 22:17:44
I'm afraid what you want to achieve isn't doable that easily because there is no direct way to tell the new browser window what you have written in the first window.
You can do it like this however.
- Prompt to enter some text
- Save the entered text into the browser's localstorage.
- Open the same html page using window.open() but append a query string to the url eg ?id=new
- Make a distinction via code if the site was called with or without a query string. If there's no query string show the prompt dialog, if there is a query string get the text from the localStorage and write it to the browser window.
Use this snippet and save it as test.html
<html>
<head>
<script type="text/javascript">
var urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('id') == null) {
var text = prompt("Tell us something about yourself");
localStorage.setItem('myText', text);
window.open("test.html?id=new", "slayyyter");
} else {
document.write("You have written: " + localStorage.getItem('myText'));
}
</script>
</head>
</html>
As a side note - window.open() accepts an url as the first parameter. You can't simply enter some text or pass a string containing text - it must be a valid resource eh an image, a html file, php,...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.