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>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>