how to pass input element into h3 tag not in url

Question

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

score 1 · Accepted Answer · answered Jul 25 '22 at 10:07

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>

how to pass input element into h3 tag not in url

1 Answers1