I want that when I press on any keyboard key every character in the "array" element will be written in the "log" element one by one. the problem is that when I hold down the keyboard button the code keeps writing in the "log" element.
window.onload = () => {
let log = document.getElementById("log");
}
let string = `CODE EXAMPLE :
let firstName = "user";
let lastName = "userLastName"
let Bool = |true;|
if (Bool === 1) {
console.log(firstName += lastName);
}`;
let array = string.split("|");
let i = 0;
let x = 0;
log.addEventListener("click", () => {
document.addEventListener("keypress", type);
})
function type() {
log.innerText += array[i].charAt(x);
x++;
if (x === array[i].length) {
x = 0;
i++;
}
if (array[i] === undefined) {
document.removeEventListener("keypress", type);
}
}#log {
height: 350px;
width: 500px;
padding: 15px;
position: absolute;
left: 10px;
color: rgb(0, 255, 0);
font-size: 14px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 25px;
white-space: pre-wrap;
line-height: 20px;
}
#log::after {
content: "";
position: absolute;
width: 7px;
height: 20px;
background-color: rgb(0, 255, 0);
animation: animation .5s infinite linear alternate;
}
@keyframes animation {
to {background-color: transparent;}
}<pre id="log"></pre>