Using JavaScript do replace all occurrences of a few strings in HTML by the user input from a prompt

Context: I’m a newbie in JavaScript and I’m learning as I go with a little program I built for my job on customer service. It’s a HTML file with some some quick generic messages which are used by many attendants, each representing a branch from our company. I want each attendant to be able to customize their name and their branch’s name (which are represented by the strings “YourName” and “YourBranch”). I feel I’m so close to getting it and this is the last thing I need to do before being able to share with my peers, which are very much in need of this solution. So I decided to ask for help.

What I’m trying to do and what I tried so far: I created a button that opens a prompt where they can input their info. The intention is to use their input so that it gets replaced in the HTML text. And I somewhat managed to do it with lots of google fu, but the replace operation only happened in the first occurrence. I want it to happen in all occurrences. I tried a loop but failed. All examples I found for loops were about increments or strings, and I’m using a user input. So I decide to trying another way using two replace() and global regular expressions, which you can see in the last portion of my JS code.

Can someone enlighten me, please?

Below, a small portion of my HTML file and my whole Javascript file. Didn’t consider CSS relevant.

const buttonName = document.querySelector('#buttonEditName')

const nameAttendant = document.querySelector('#attendantName')
const nameBranch = document.querySelector('#branchName')

buttonName.onclick = () => {
  const name = prompt('What is your name?')
  const branch = prompt('What is your branch name?')

  nameAttendant.textContent = `${name}`
  nameBranch.textContent = `${branch}`

  const textAnswer = document.querySelector('.content')
  textAnswer.textContent = textAnswer.textContent.replace(/nameAttendant/g, name)
  textAnswer.textContent = textAnswer.textContent.replace(/nameBranch/g, branch)
}

<div class="content">
  <h1 class="main-title">Quick Messages</h1>

  <div class="container">
    <button id="buttonEditName">Edit attendant and branch info</button>
  </div>

  <h3 id="welcome">Welcome</h3>
  <p>
    Good morning! My name is <span id="attendantName">YourName</span> and I represent <span id="branchName">YourBranch</span>. How can I help you?
  </p>

  <p>
    Good afternoon! My name is <span id="attendantName">YourName</span> and I represent <span id="branchName">YourBranch</span>. How can I help you?
  </p>

Answer

you have several tag with same id it’s an invalid syntax you should use class instead id in this case
like you have several tag with same selector you should use querySelectorAll method to select all of them and loop on each instance to replace innerText with correct value

const buttonName = document.querySelector('#buttonEditName')

buttonName.onclick = () => {
  const name = prompt('What is your name?');
  const branch = prompt('What is your branch name?');

  const textAnswer = document.querySelector('.content');
  [...textAnswer.querySelectorAll('.attendantName')].forEach(oneNamePlace => oneNamePlace.innerText = name);
  [...textAnswer.querySelectorAll('.branchName')].forEach(oneBranchName => oneBranchName.innerText = branch);
}

<div class="content">
  <h1 class="main-title">Quick Messages</h1>

  <div class="container">
    <button id="buttonEditName">Edit attendant and branch info</button>
  </div>

  <h3 id="welcome">Welcome</h3>
  <p>
    Good morning! My name is <span class="attendantName">YourName</span> and I represent <span class="branchName">YourBranch</span>. How can I help you?
  </p>

  <p>
    Good afternoon! My name is <span class="attendantName">YourName</span> and I represent <span class="branchName">YourBranch</span>. How can I help you?
  </p>

Advertisement

Answer