Contexto: soy un novato en JavaScript y estoy aprendiendo sobre la marcha con un pequeño programa que construí para mi trabajo en servicio al cliente. Es un archivo HTML con algunos mensajes genéricos rápidos que utilizan muchos asistentes, cada uno de los cuales representa una sucursal de nuestra empresa. Quiero que cada asistente pueda personalizar su nombre y el nombre de su sucursal (que están representados por las cadenas "SuNombre" y "SuSucursal"). Siento que estoy muy cerca de obtenerlo y esto es lo último que debo hacer antes de poder compartir con mis compañeros, que necesitan mucho esta solución. Así que decidí pedir ayuda.
Lo que estoy tratando de hacer y lo que intenté hasta ahora: creé un botón que abre un mensaje donde pueden ingresar su información. La intención es usar su entrada para que sea reemplazada en el texto HTML. Y de alguna manera me las arreglé para hacerlo con mucho google fu, pero la operación de reemplazo solo sucedió en la primera aparición. Quiero que suceda en todas las ocurrencias. Intenté un bucle pero fallé. Todos los ejemplos que encontré para bucles eran sobre incrementos o cadenas, y estoy usando una entrada de usuario. Así que decido probar de otra manera usando dos replace() y expresiones regulares globales, que puedes ver en la última parte de mi código JS.
¿Alguien puede iluminarme, por favor?
A continuación, una pequeña parte de mi archivo HTML y todo mi archivo Javascript. No consideró CSS relevante.
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>