how to pass input element into h3 tag not in url-CodePudding

I want to update h3 tag every time user clicks but it does not update it updates the tab url but i do not want to update URL, I wanted to update only h3 tag.

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>

here javaScript code.

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);

CodePudding user response：

First add type="button" inside your <button> declaration, as mentioned here.

Then, you need .value of your HTML elements, and their declaration must be inside your function, otherwise they will be executed as the page loads, and will be empty.

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>