I am trying to figure out if there is a way to use document.GetElementsByClassName()(or anything else) to populate text templates in HTML. I am an amateur to JavaScript, and am currently practicing with some of its functionality.
The current web page that I wrote is a simple input field that asks for your name; and once it's submitted, it displays a message saying "Hello [name]. Welcome to the playground!", followed by another message that restates the user's name. Here is an example of my code:
<!DOCTYPE html>
<html>
<head>
<style>
#hidden {
display: none;
}
</style>
</head>
<body>
<div>
<div id="changeText"> <!-- the ID, changeText, is set to disappear once input is submitted-->
<h3 >Hi, please enter your name below.</h3>
<input id="name" type="text" name="name" maxlength="20"><br><br>
<button onclick="updatePage()">Submit</button> <!-- function is called when button is clicked -->
</div>
</div>
<div id="hidden">
<h1>Hello, <span id="printName"></span>. Welcome to the playground!</h1>
<p>Nice to meet you, <span id="printName"></span>. <p>
</div>
<script>
// function, updatePage() will save the user input.
// afterwards, a welcome message will be returned to the HTML.
// finally, the div that contains the previous message and input field will be
// displayed as 'none' with CSS.
function updatePage() {
let userName = document.getElementById('name').value;
document.getElementById('changeText').style.display = "none";
document.getElementById('hidden').style.display = "inline";
document.getElementById("printName").innerHTML = userName;
}
</script>
</body>
</html>
Now, I am currently using document.getElementById("printName").innerHTML = userName; on line 33 to populate the message with the user input. As you can see however, it will only work one time for an ID element.
When I use the sample of code containing document.getElementsByClassName("printName").innerHTML = userName;, the function runs with 0 errors in the console; but the user inputs do not populate. Here is a sample of the code:
<!DOCTYPE html>
<html>
<head>
<style>
#hidden {
display: none;
}
</style>
</head>
<body>
<div>
<div id="changeText"> <!-- the ID, changeText, is set to disappear once input is submitted-->
<h3 >Hi, please enter your name below.</h3>
<input id="name" type="text" name="name" maxlength="20"><br><br>
<button onclick="updatePage()">Submit</button> <!-- function is called when button is clicked -->
</div>
</div>
<div id="hidden">
<h1>Hello, <span class="printName"></span>. Welcome to the playground!</h1>
<p>Nice to meet you, <span class="printName"></span>. <p>
</div>
<script>
// function, updatePage() will save the user input.
// afterwards, a welcome message will be returned to the HTML.
// finally, the div that contains the previous message and input field will be
// displayed as 'none' with CSS.
function updatePage() {
let userName = document.getElementById('name').value;
document.getElementById('changeText').style.display = "none";
document.getElementById('hidden').style.display = "inline";
document.getElementsByClassName("printName").innerHTML = userName;
}
</script>
</body>
</html>
What I am trying to accomplish is a way to populate the user's name into multiple locations in order to personalize the user experience. I apologize in advance if this question has already been asked. I am still very fresh, and did not know how to query what it is that I am trying to say in better terms.
