Creé un sitio web donde te dice tu edad. Uso document.createTextNode para almacenar la salida, pero la salida no funciona correctamente. Aquí está el código de salida
var h1 = document.createElement("p"); h1.setAttribute("id", "mainText") var mainText = document.createTextNode("You are ", ageYears, " years, ", ageMonths, " months and ", ageDays, " days old."); h1.appendChild(mainText); document.getElementById("new-age").appendChild(h1);Cuando ejecuto mi código, solo genera la primera parte, "Eres". ¿Hay alguna forma de generar el mensaje completo?
Dado document.createTextNode recibe solo un parámetro como datos, debe cambiar su document.createTextNode como el código a continuación para generar una cadena con sus datos: (en su código porque está usando , para concatenar cadenas, en realidad está pasando múltiples cadenas para document.createTextNode y lee solo el primer argumento e ignora otros argumentos)
var mainText = document.createTextNode("You are " + ageYears + " years, " + ageMonths + "months and " + ageDays + " days old.");o:
var mainText = document.createTextNode(`You are ${ ageYears} years, ${ageMonths} months and ${ageDays} days old.`);Aquí hay un ejemplo:
const ageYears = 30; const ageMonths = 10; const ageDays = 22; function appendText() { let p = document.createElement("p"); let mainText = document.createTextNode(`You are ${ ageYears} years, ${ageMonths} months and ${ageDays} days old.`); p.appendChild(mainText); document.getElementById("new-age").appendChild(p); } document.getElementById('appendBtn').addEventListener('click', appendText) <div id="new-age"></div> <button id="appendBtn">append text</button>En JavaScript usas + en lugar de . para concatenar cadenas.
ejemplo de trabajo
var h1 = document.createElement("p"); h1.setAttribute("id", "mainText"); let ageYears = 20; let ageMonths = 12 let ageDays = 24; var mainText = document.createTextNode("You are " + ageYears + " years, " + ageMonths + " months and " + ageDays + " days old."); h1.appendChild(mainText); document.getElementById("new-age").appendChild(h1); <div id="new-age"></div>