Aquí hay un ejemplo simplificado de algo que estoy tratando de hacer.
Tengo un campo de input del que necesito obtener el valor cuando el usuario escribe su nombre y hace clic en el button "Guardar cambios".
Lo que necesito es que la variable de nombre de username se actualice de acuerdo con lo que el usuario escribió. La página tiene características de localización que complican un poco las cosas. Parece que no puedo completar el valor actualizado dentro del objeto de translations (en cualquier lugar donde se mencione el nombre de username , el valor inicializado se conserva y no el último asignado). Esta es la parte con la que estoy luchando.
Aquí está mi código:
var p = document.querySelectorAll("p")[0]; var input = document.querySelectorAll("input")[0]; var button = document.querySelectorAll("button")[0]; var locale = "en"; var username = ""; button.onclick = function() { username = input.value; document.querySelectorAll("[data-language-key]").forEach(translate); } function translate(element) { const key = element.getAttribute("data-language-key"); const translation = translations[locale][key]; element.innerText = translation; } var translations = { "en": { "message": `Good morning, ${username}!`, }, "fr": { "message": `Bonjour, ${username} !`, } } body { background-color: gray; } button { margin: 200px; } <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <p data-language-key="message">Good morning, {username}!</p> <input type="text" placeholder="Type your name..."> <button>Save changes</button> </body> </html>Principiante de JavaScript aquí (si puede ELI5 su respuesta, ¡lo agradecería mucho!)
Como se sugiere en los comentarios, la variable se sustituye cuando se lee el literal, por lo que posponemos la lectura hasta que realmente se necesite. Esto se hace usando una función.
var p = document.querySelector("p"); var input = document.querySelector("input"); var button = document.querySelector("button"); var locale = "en"; var username = ""; button.onclick = function() { username = input.value; translate(document.querySelector("[data-language-key]")); } function translate(element) { var key = element.getAttribute("data-language-key") const translation = translations[locale][key]; var text = translation(username); element.innerText = text; } var translations = { "en": { "message": () => `Good morning, ${username}!`, }, "fr": { "message": () => `Bonjour, ${username} !`, } } <p data-language-key="message">Good morning, {username}!</p> <input type="text" placeholder="Type your name..."> <button>Save changes</button>