使用 eventlistener 和 DOM 更改另一个 html 上的文本

Question

我试图在一个 html 表单中获取输入，然后在按钮上使用事件侦听器移动到另一个 html 页面并更改第二个 html 的 innerHTML ] 页面到第一页的输入，但只有页面切换但 innerHTML 没有改变这是主要的 html

    <form>
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname"><br>
        </form>
    <button  id="Butn1" onclick="location.href = 'resume.html';">Submit</button>
<script src="main.js"></script>

这是第 2 html 页

 <div>
        Name: <br>

        <p id="fname1">hello</p>

    </div>
<script src="main.js"></script>

这是js文件

document.getElementById("Butn1").addEventListener("click",func1);
var a=document.getElementById("fname").value;
function func1(){
    
    document.getElementById("fname1").innerHTML = a;

}

Answer 1

你可以这样用。
如果这是您的第一页：

<!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>
    <form>
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname"><br>
        </form>
    <button  id="Butn1" onclick="handleClick()">Submit</button>
    <script>
        function handleClick()
        {
            location.href = 'secondPage.html?name=' + document.getElementById("fname").value;
        }
    </script>
</body>
</html>

这将是您的第二页

<!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>
    <script>
        const urlParams = new URLSearchParams(window.location.search);
        const myParam = urlParams.get('name');
        alert(myParam);
    </script>
</body>
</html>

但是如果你的字符串太长，不建议使用这个。

使用 eventlistener 和 DOM 更改另一个 html 上的文本

using eventlistener and DOM to change text on another html

html

javascript