Tengo un script que imprime cada letra de una cadena y cuántas veces se imprime, pero no funciona correctamente, anula la última letra. Por ejemplo: cuando escribe en el área de texto "asistencia" debe imprimir lo siguiente: a: 1 s: 3 i: 1 t: 1 Pero solo imprime: t: 1 ¿Cómo imprimir correctamente la cadena?
function ex44() { let string = document.getElementById("sarc4").value string = string.toLowerCase(); const count = {} string.split("").forEach(ch => { if (!count[ch]) { count[ch] = 1 return } count[ch]++ }) for (const key in count) { document.getElementById("result4").innerHTML = `${key} : ${count[key]}` } } <label for="sarcina4"> Enter text</label> <br> <textarea name="sarcina4" id="sarc4" cols="60" rows="5"></textarea> <br> <button onclick="ex44()">Afisare</button> <p id="result4"></p>document.getElementById("result4").innerHTML = `${key} : ${count[key]}` Anulará el innerHTML .
Considere 'agregar' el contenido usando appendChild o insertAdjacentHTML :
¿Es posible agregar a innerHTML sin destruir los oyentes de eventos de los descendientes?
const res = document.getElementById("result4"); for (const key in count) { res.insertAdjacentHTML('beforeend', `<p>${key} : ${count[key]}</p>`); } function ex44() { let string = document.getElementById("sarc4").value string = string.toLowerCase(); const count = {} string.split("").forEach(ch => { if (!count[ch]) { count[ch] = 1 return } count[ch]++ }) const res = document.getElementById("result4"); for (const key in count) { res.insertAdjacentHTML('beforeend', `<p>${key} : ${count[key]}</p>`); } } <label for="sarcina4"> Enter text</label> <br> <textarea name="sarcina4" id="sarc4" cols="60" rows="5"></textarea> <br> <button onclick="ex44()">Afisare</button> <p id="result4"></p> Nota : he envuelto la ${key} : ${count[key]} dentro de una etiqueta <p></p> para que veamos cada letra en una fila separada
Otra opción es crear una cadena de output usando el map y join así:
const output = Object.keys(count).map((key) => `<p>${key} : ${count[key]}</p>`); document.getElementById("result4").innerHTML = output.join(''); function ex44() { const input = document.getElementById("sarc4").value.toLowerCase(); const count = {} input.split("").forEach(ch => { if (!count[ch]) { count[ch] = 1; } else { count[ch]++ } }); const output = Object.keys(count).map((key) => `<p>${key} : ${count[key]}</p>`); document.getElementById("result4").innerHTML = output.join(''); } <label for="sarcina4"> Enter text</label> <br> <textarea name="sarcina4" id="sarc4" cols="60" rows="5">test</textarea> <br> <button onclick="ex44()">Afisare</button> <p id="result4"></p>Almacene en caché sus elementos y luego use textContent para actualizar el texto del elemento usando la concatenación de cadenas.
const sarc4 = document.getElementById('sarc4'); const result4 = document.getElementById('result4'); function ex44() { string = sarc4.value.toLowerCase(); const count = {}; string.split("").forEach(ch => { if (!count[ch]) { count[ch] = 1; return; } count[ch]++ }); let result = ''; for (const key in count) { result += `${key}:${count[key]} `; } result4.textContent = result; } <label for="sarcina4"> Enter text</label> <br> <textarea name="sarcina4" id="sarc4" cols="60" rows="5"></textarea> <br> <button onclick="ex44()">Afisare</button> <p id="result4"></p>Mueva document.getElementById("result4").innerHTML fuera del ciclo.
Está reescribiendo el HTML result4 innerHTML vez que se ejecuta el bucle. Puede actualizar el HTML interno agregando la nueva cadena con la existente usando a continuación para solucionar el problema.
document.getElementById("result4").innerHTML += `${key} : ${count[key]}`La implementación anterior no se puede considerar como una buena implementación a pesar de que soluciona su problema. Acceder a los elementos DOM directamente desde el script siempre es costoso. Si está dentro de un bucle, definitivamente es más costoso.
En lugar de acceder al elemento DOM varias veces desde un bucle, puede crear la cadena de plantilla dentro del bucle y asignar el innerHTML solo una vez, como se muestra a continuación. Esto será mejor en términos de rendimiento.
function ex44() { let string = document.getElementById("sarc4").value string = string.toLowerCase(); let template = ''; const count = {} string.split("").forEach(ch => { if (!count[ch]) { count[ch] = 1 return } count[ch]++ }) for (const key in count) { template += `${key} : ${count[key]}` } document.getElementById("result4").innerHTML = template; } <label for="sarcina4"> Enter text</label> <br> <textarea name="sarcina4" id="sarc4" cols="60" rows="5"></textarea> <br> <button onclick="ex44()">Afisare</button> <p id="result4"></p>