Me gustaría escribir mi propio sitio de hackertyper que se imprima solo al presionar algunas teclas.
Pero cuando pruebo el siguiente código, imprime todo en la misma línea. Usé literales de plantilla (``) y no pude hacerlo. Luego probé <br /> en la cadena pero tampoco funcionó. ¿Cómo lo hago bien?
Editar: estaba usando la etiqueta <p> en el archivo HTML, cuando la cambié a la etiqueta <pre> como dijo Praveen, resolvió mi problema. Gracias.
"use strict"; let str = `"use strict" let str = ""; let emptyStr = ""; let i = 0; document.addEventListener("keydown", function () { emptyStr += str.charAt(i++) + str.charAt(i++) + str.charAt(i++); document.querySelector("#string").textContent = emptyStr; });`; let emptyStr = ""; let i = 0; document.addEventListener("keydown", function () { emptyStr += str.charAt(i++) + str.charAt(i++) + str.charAt(i++); document.querySelector("#string").textContent = emptyStr; }); <p id="string"></p>Supongo que si está tratando de imprimirlo, debe imprimirlo en una etiqueta <pre> o un elemento con white-space: pre o similar.
Aquí hay un ejemplo con la etiqueta <pre> :
let str = `This is HackerTyper See I have spaces and lines!`; let emptyStr = ""; let i = 0; document.addEventListener("keydown", function () { emptyStr += str.charAt(i++) + str.charAt(i++) + str.charAt(i++); document.querySelector("#string").textContent = emptyStr; }); <pre id="string"></pre> Aquí está lo mismo con white-space: pre para <div> :
let str = `This is HackerTyper See I have spaces and lines!`; let emptyStr = ""; let i = 0; document.addEventListener("keydown", function () { emptyStr += str.charAt(i++) + str.charAt(i++) + str.charAt(i++); document.querySelector("#string").textContent = emptyStr; }); div { white-space: pre; } <div id="string"></div>Y, finalmente, solo quería decir que esta es una muy buena implementación de HackerTyper.