Question

我是新手使用html，这是我想要制作的第一个网站，用于练习。我希望在主页上进行简短的调查，点击提交后我希望下一页将该信息显示为句子。

这是我的主页

<!DOCTYPE html>
<html>
<body>
<h1><center>Short Survey</center></h1><big>
<form action="afterSubmission.html">
<caption>1. What is your favourite browser?</caption>
<input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>
<br>
<br>
<caption>2. What is your favourite food group?</caption>
<input list="food_groups" name="food">
<datalist id="food_groups">
    <option value="Meats/Alternatives">
    <option value="Vegetables">
    <option value="Dairy Products">
    <option value="Fruits">
    <option value="Grains">
    <option value="Confections (Junk Food)">
</datalist>
<br>
<br>
<caption>3. What is your favourite game genre?</caption><br>
    <input type="radio" name="game" value="FPS">First Person Shooter (Ex: Halo, Call of Duty)<br>
    <input type="radio" name="game" value="TPS">Third Person Shooter (Ex: Ghost Recon, Gear of War)<br>
    <input type="radio" name="game" value="Puzzle">Puzzle (Ex: Sudoku, Minesweeper)<br>
    <input type="radio" name="game" value="Sim">Simulation (Ex: Minecraft, SimCity)<br>
    <input type="radio" name="game" value="Other">Other (Please specify the genre)&nbsp;<input type="text" name="other_genre"><br>
<br>
<br>
<input type="Submit" onclick="saveData()">
</form>
<script>
function saveData(e){
e.preventDefault();
var q1 = browser;
var q2 = food;
var q3 = game;
localStorage.setItem("browser", q1.value);
localStorage.setItem("food", q2.value);
localStorage.setItem("game", q3.value);
}
</script>
</body>
</html>

这是我的第二页，它应该显示信息：

<html>
<h1>
<p>Your favourite browser is:&nbsp;</p><p id="val1"></p>
<p>Your favourite browser is:&nbsp;</p><p id="val2"></p>
<p>Your favourite browser is:&nbsp;</p><p id="val3"></p>
<script>
function setData1(){
document.getElementById("val1").innerHTML = localStorage.getItem(browser);
}
function setData2(){
document.getElementById("val2").innerHTML = localStorage.getItem(food);}
function setData3(){
document.getElementById("val3").innerHTML = localStorage.getItem(game);
}
</script>
</h1>
</html>

主页工作正常（或者我认为），但每当我点击提交时，它都会将我带到第二页而没有用户输入（在段落之后它只是空白）。我怎样才能让它发挥作用？

Answer 1

主页

 <h1><center>Short Survey</center></h1><big>
    <form action="afterSubmission.html" method="get">
    <caption>1. What is your favourite browser?</caption>
    <input id="browserValue" list="browsers">
    <datalist id="browsers" >
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
    </datalist>
    <br>
    <br>
    <caption>2. What is your favourite food group?</caption>
    <input id="foodValue" list="food">
    <datalist id="food">
        <option value="Meats/Alternatives">
        <option value="Vegetables">
        <option value="Dairy Products">
        <option value="Fruits">
        <option value="Grains">
        <option value="Confections (Junk Food)">
    </datalist>
    <br>
    <br>
    <caption>3. What is your favourite game genre?</caption>
    <input id="gameValue" list="game">
    <datalist id="game">
        <option value="FPS">First Person Shooter (Ex: Halo, Call of Duty)
        <option value="TPS">Third Person Shooter (Ex: Ghost Recon, Gear of War)
        <option value="Puzzle">Puzzle (Ex: Sudoku, Minesweeper)
        <option value="Sim">Simulation (Ex: Minecraft, SimCity)
        <option value="Other">Other (Please specify the genre)&nbsp;<input type="text" name="other_genre">
       </datalist>
    <br>
    <br>
    <input type="button" onclick="saveData()" value="Submit">
    </form>
    <script>
    function saveData(){
    var q1 = document.getElementById("browserValue");
    var q2 = document.getElementById("foodValue");
    var q3 = document.getElementById("gameValue");
    localStorage.setItem("browsers", q1.value);
    localStorage.setItem("food", q2.value);
    localStorage.setItem("game", q3.value);
    window.location = "page2.html";
    }
    </script>

page2.html

<h1>
<p id="answer1">Your favourite browser is:&nbsp;</p>
<p id="answer2">Your favourite browser is:&nbsp;</p>
<p id="answer3">Your favourite browser is:&nbsp;</p>
</h1>
<script>
document.getElementById("answer1").innerHTML += localStorage.getItem("browsers");
document.getElementById("answer2").innerHTML += localStorage.getItem("food");
document.getElementById("answer3").innerHTML += localStorage.getItem("game");
</script>

Answer 2

在saveData函数中，您应该防止默认（这是表单子目录）。这将停止自动表单提交，您可以手动重定向到第二页。

function saveData(e) {
    e.preventDefault();
    ... // store data
    window.location = "mySecondPage.html";
}

如何使用本地存储在新的html页面中显示文本？

2 个答案: