Question

我是JavaScript新手，我想创建一个包含输入字段和一些按钮的html文件。当用户填写所有数据并选择他们的按钮时，他们按下提交按钮，这将打开新的＆＃34; result.html＆＃34;我要存储一些变量的页面。这个页面应该有自己的设计并展示他们的行动结果。

你能否告诉我如何正确地做到这一点。我尝试使用下面的代码，但没有成功。

quick.html

<html>
<head>
    <script type="text/javascript" src="submit.js"></script>
</head>
<body>
    <div style="height: 25px;"><input type="text" id="name"></div>
    <div style="height: 25px;"><input type="text" id="age"></div>

    <div><input type="submit" id="p11" value="1" onClick="add1();"></div>
    <div><input type="submit" id="p12" value="2" onClick="add1();"></div><br /><br />
    <div><input type="submit" id="p21" value="1" onClick="add3();"></div>
    <div><input type="submit" id="p22" value="2" onClick="add4();"></div><br /><br />

    <div id="button"> 
    <input type="submit" id="calculate" value="CALCULATE" onClick="run();input();wopen();">
    </div>
</body>
</html>

submit.js

var p1 = 0;
var p2 = 0;

function add1() {
    p1 = 1; return p1;}
function add2() {
    p1 = 2; return p1;}
function add3() {
    p2 = 1; return p2;}
function add4() {
    p2 = 2; return p2;}

function run() {
    sum = p1+p2;}

function input() {
    inp1 = document.getElementById("name").value;
    inp2 = document.getElementById("age").value;
    myName = "My name is: " + inp1 + '<br />';
    myAge = "My age is: " + inp2 + '<br />';}

function wopen() {
    window.open("result.html","_blank");}

result.html

<html>
<head>
    <script type="text/javascript" src="submit.js"></script>
</head>
<body>
    <div id="info"></div>
    <br/>
    <div id="number"></div>
<script type="text/javascript">
    document.getElementById("info").innerHTML = ("The name: " + myName);
    document.getElementById("info").innerHTML = ("The name: " + myName);
    document.getElementById("number").innerHTML = ("The sum of numbers: " + sum);
</script>
</body>
</html>

Answer 1

您可以使用localStorage

function input() {
    inp1 = document.getElementById("name").value;
    localStorage.setItem('myName', inp1);
}

在result.html中

<script type="text/javascript">
    document.getElementById("info").innerHTML = localStorage.getItem('myName');
</script>

Answer 2

如果您使用结果页面的新窗口/选项卡，仍可通过开启对象访问原始页面。

步骤： 1.将新的Html（如result.html）加载到新窗口中 2.在body onload事件中，调用一个函数，该函数将访问以下字段：

var v1 = window.opener.document.getElementById('thatid').value;

使用其他页面中的JavaScript变量填写新页面

2 个答案: