Updating multiple instances of text spans using Javascript-CodePudding

I apologize if my inquiry is dumb. I'm brand new to anything more fancy than making my text bold. I have tried and not found an answer.

I am trying to use Javascript to make some tools for myself with dynamic HTML pages. I have been trying to have instances of text be updated from an HTML form and while I am able to update a single instance any more than that stay unchanged.

Below is a sample of my project that shows what level of functionality it has. The code is a Frankenstein of snippets I pieced together from people who know better than I.

Any help would be greatly appreciated.

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"  />
    </form>
  </p>
  <p>tabs of sentences</p>

  <div >
    <button  onclick="openTab(event, 'Tab 1')">Tab 1</button>
    <button  onclick="openTab(event, 'Tab 2')">Tab 2</button>
    <button  onclick="openTab(event, 'Tab 3')">Tab 3</button>
  </div>

  <div id="Tab 1" >
    <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" >
    <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" >
    <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>

CodePudding user response：

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"  />
  </form>
</p>
<p>tabs of sentences</p>

<div >
  <button  onclick="openTab(event, 'Tab1')">Tab 1</button>
  <button  onclick="openTab(event, 'Tab2')">Tab 2</button>
  <button  onclick="openTab(event, 'Tab3')">Tab 3</button>
</div>

<div id="Tab1" >
  <p>Hello, my name is <b><span ;>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" >
  <p>Welcome, my name is <b><span ;>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" >
  <p>Greetings, my name is <b><span ;>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>

CodePudding user response：

As per the comments above the spaces in id="..." and name="..." attributes aren't helping, but the issue that you're having with your changeText function is the fact that you are using the same id for each element, id attributes need to be unique within the page.

document.getElementById('initname') will only ever find the first element with the id of "initname" in the page.

If you have multiple elements that you need to identify it is better if you give them a and use document.getElementsByClassName('initname') or the more powerful document.querySelectorAll('.initname') to retrieve all the elements with that class and then loop through them all, as you are doing in your openTab() function.