如何将输入元素传递给不在url中的h3标签答案

【问题标题】：how to pass input element into h3 tag not in url如何将输入元素传递给不在url中的h3标签
【发布时间】：2022-07-25 18:07:17
【问题描述】：

我想在用户每次点击时更新 h3 标签，但它不会更新它会更新标签 url 但我不想更新 URL，我只想更新 h3 标签。

I attached all files and URL screenshot.

<!DOCTYPE html>
<html>

    <head>

    </head>

    <body>
        <form>
            <h3 id="url">https://localhost:8080/</h3>
            <label for="name">Name :</label><br>
            <input type="text" id="name" name="name"><br>
            <label for="year">Graduation Year :</label><br>
            <input type="number" id="year" name="year"><br>
            <button id="button" onclick="updateURL()">Submit</button>
        </form>
        <script src="app.js"></script>
    </body>

</html>

这里是 javaScript 代码。

const name = document.getElementById("name").innerHTML;
const year = document.getElementById("year").innerHTML;
let url = document.getElementById("url");
const oldURL = url.innerHTML;
const newURL = oldURL + "?name=" + name + "&year=" + year;

function updateURL() {
    
    url.innerHTML = newURL;
}
console.log("hiii");
console.log(oldURL)
console.log(newURL);

【问题讨论】：

标签： javascript

【解决方案1】：

function updateURL(e) {
const name = document.getElementById("name").value;
const year = document.getElementById("year").value;
console.log(name, year);
let url = document.getElementById("url");
const oldURL = url.innerHTML;
const newURL = oldURL + "?name=" + name + "&year=" + year;
    url.innerHTML = newURL;
}

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <form>
            <h3 id="url">https://localhost:8080/</h3>
            <label for="name">Name :</label><br>
            <input type="text" id="name" name="name"><br>
            <label for="year">Graduation Year :</label><br>
            <input type="number" id="year" name="year"><br>
            <button type="button" id="button" onclick="updateURL()">Submit</button>
        </form>
        <script src="app.js"></script>
    </body>
</html>

【讨论】：