我知道这个问题在这里问了很多,但我对编程很陌生,对 HTML 也很陌生。因此,已经提出的问题对我没有帮助,我宁愿需要一个简短的代码修复。我有这两个 HTML 文件,我想要做的就是在输出 HTML 的文本字段中显示来自输入 HTML 的输入。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Input</title>
</head>
<body>
<div id="top">
<div id="headline">Input Overlay</div>
<form id="formOverlay">
<div id="numberOption"><label for="numberOption">Enter a number between 1 and 10:</label>
<input type="number" name="numberOption" id="numberBlock" min="1" max="10">
</div>
<div id="dropDownSelect"><label for="dropDownSelect">Select a value:</label>
<select name="dropSelectBlock" id="dropSelectBox">
<option value="Select a value">select a value:</option>
<option value="in progress">a</option>
<option value="in progress">b</option>
</select>
</div>
</form>
</div>
<a href="link_to_testOutput.html">
<button type="button" id="ok-button">OK</button> </a>
<button form="formOverlay" type="reset" id="reset-button">Reset</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Output</title>
</head>
<body>
<div id="top">
<div id="headline">Output</div>
<div id="currentInput">Current input:</div>
<textarea id="currentInputBox" name="currentInfoBox" rows="2" cols="50">Number:
Value: </textarea>
</div>
<a href="link_to_testIput.html">
<button type="button" id="back-button">Back</button> </a>
</body>
</html>
答案 0 :(得分:1)
只需将表单提交到下一页:
<div id="top">
<div id="headline">Input Overlay</div>
<form id="formOverlay" method="get" action="link_to_testOutput.html">
<div id="numberOption"><label for="numberOption">Enter a number between 1 and 10:</label>
<input type="number" name="numberOption" id="numberBlock" min="1" max="10">
</div>
<div id="dropDownSelect"><label for="dropDownSelect">Select a value:</label>
<select name="dropSelectBlock" id="dropSelectBox">
<option value="Select a value">select a value:</option>
<option value="in progress A">a</option>
<option value="in progress B">b</option>
</select>
</div>
<button id="ok-button">OK</button>
<button type="reset" id="reset-button">Reset</button>
</form>
</div>
第 2 页
window.addEventListener("load", function() {
const url = new URL("https://yourserver.com/link_to_testOutput.html?dropSelectBlock=in%20progress B&numberOption=9") // new URL(location.href)
document.getElementById("currentInputBox").value = `Number:${url.searchParams.get("numberOption")}\nValue: ${url.searchParams.get("dropSelectBlock")}`
})
<div id="top">
<div id="headline">Output</div>
<div id="currentInput">Current input:</div>
<textarea id="currentInputBox" name="currentInfoBox" rows="2" cols="50"></textarea>
</div>
测试时更改
const url = new URL("https://....") // new URL(location.href)
到
const url = new URL(location.href);