Issue
I want to make some tools for myself with dynamic HTML pages using JavaScript. I have been trying to update text in an HTML form, and while I can update a single piece of text, I cannot update any more.
Below is some sample code from my project which demonstrates this problem. The code is a collection of snippets I pieced together from other code samples.
I have tried to find an answer, but my JavaScript level is basic.
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
function changeText(element) {
document.getElementById('initname').innerHTML = element.value;
}body {
font-family: Arial;
width: 75%;
margin-right: auto;
margin-left: auto;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 15px 15px;
transition: 0.2s;
font-size: 18px;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
.tabcontent {
display: none;
padding: 5px 5px;
border: 1px solid #ccc;
border-top: none;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Test thing</h2>
<p>
<form method="post">
<input type="text" onkeyup="changeText(this)" name="first name" placeholder="Enter Your Name" required="required" class="input-txt" />
</form>
</p>
<p>tabs of sentences</p>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Tab 1')">Tab 1</button>
<button class="tablinks" onclick="openTab(event, 'Tab 2')">Tab 2</button>
<button class="tablinks" onclick="openTab(event, 'Tab 3')">Tab 3</button>
</div>
<div id="Tab 1" class="tabcontent">
<p>Hello, my name is <b><span id="initname";>First and Last</span></b> number 1 and I really wish all instances of my name would update when I type in the above text field.</p>
</div>
<div id="Tab 2" class="tabcontent">
<p>Hello, my name is <b><span id="initname";>First and Last</span></b> number 2 and I really wish all instances of my name would update when I type in the above text field.</p>
</div>
<div id="Tab 3" class="tabcontent">
<p>Hello, my name is <b><span id="initname";>First and Last</span></b> number 3 and I really wish all instances of my name would update when I type in the above text field.</p>
</div>
</body>
</html>Solution
You have spaces in the ids, Tab 1, Tab 2, and Tab 3. This is not a good idea. I removed them from the divs and from the openTab(event, 'Tab X') calls above.
There are three <span>s with the same id of initname. Elements should each have unique ids. You could give each element a different id, but in this case, it would be better to change those ids to class. This will be used later to fix another problem.
For ease of comparing the sentences, I changed the first word of each sentence so that it is more clear that the text changes when you click on a tab.
As mentioned in the comments to your question, you had a space in your class name " active", so it should be removed in two places. Also, the correct way to remove and add classes is as follows:
.classList.remove("active");
.classList.add("active");
When you type a name into the input field it should change the name in all of the spans. So, I used the same code structure you used to loop through each span to change each element's innerHTML to the new value being entered into the input field.
Please note that I used let and const instead of var.
I used innerHTML because you did before, but textContent can also be used.
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove("active");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.classList.add("active");
}
function changeText(element) {
const initnames = document.getElementsByClassName("initname");
for (let i = 0; i < initnames.length; i++) {
initnames[i].innerHTML = element.value;
}
}body {
font-family: Arial;
width: 75%;
margin-right: auto;
margin-left: auto;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 15px 15px;
transition: 0.2s;
font-size: 18px;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
.tabcontent {
display: none;
padding: 5px 5px;
border: 1px solid #ccc;
border-top: none;
}<h2>Test thing</h2>
<p>
<form method="post">
<input type="text" onkeyup="changeText(this)" name="firstname" placeholder="Enter Your Name" required="required" class="input-txt" />
</form>
</p>
<p>tabs of sentences</p>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Tab1')">Tab 1</button>
<button class="tablinks" onclick="openTab(event, 'Tab2')">Tab 2</button>
<button class="tablinks" onclick="openTab(event, 'Tab3')">Tab 3</button>
</div>
<div id="Tab1" class="tabcontent">
<p>Hello, my name is <b><span class="initname";>First and Last</span></b> number 1 and I really wish all instances of my name would update when I type in the above text field.</p>
</div>
<div id="Tab2" class="tabcontent">
<p>Welcome, my name is <b><span class="initname";>First and Last</span></b> number 2 and I really wish all instances of my name would update when I type in the above text field.</p>
</div>
<div id="Tab3" class="tabcontent">
<p>Greetings, my name is <b><span class="initname";>First and Last</span></b> number 3 and I really wish all instances of my name would update when I type in the above text field.</p>
</div>Answered By - PeterJames
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.