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

一尘不染

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

javascript

我想在每次用户点击时更新 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);

阅读 90

2022-07-25

共1个答案

一尘不染

首先type="button"在您的<button>声明中添加，如此处所述。

然后，您需要.valueHTML 元素，并且它们的声明必须在您的函数中，否则它们将在页面加载时执行，并且将为空。

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>

2022-07-25