Is there a way to update the h3 tag every time a user clicks without updating the tab URL? I only want to update the h3 tag.
I have attached all files and a screenshot of the URL.
<!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 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("Hello");
console.log(oldURL)
console.log(newURL);