Quiero que cuando apriete el boton se coloree uno de los elementos p, y cuando lo vuelva a apretar no quiero que este se coloree de nuevo mas bien quiero que se pinte otro
en mi código hay un bucle que que genera 10 elementos p y cada uno tiene su numero
const btn = document.getElementById("btn")
const paraContent = document.getElementById("para-content")
let arrayContainer = [];
let existe = false
for (let i = 1; i <= 10; i++) {
let paragraph = document.createElement("p")
paragraph.textContent = i
paraContent.appendChild(paragraph)
}
let arrayContentPara = document.querySelectorAll("p")
btn.addEventListener("click", (e) => {
let aleatorio = Math.floor((Math.random()*10)+1)
console.log(aleatorio)
recorrerArray(aleatorio)
})
const recorrerArray = azar => {
for (let i = 0; i < arrayContentPara.length; i++) {
const element = arrayContentPara[i].innerText;
const recorridoAleatorio = arrayContentPara[azar].innerText
if (element === recorridoAleatorio) {
arrayContentPara[azar].style.color ="red"
arrayContentPara[azar].style.fontSize ="2rem"
arrayContainer.push(arrayContentPara[azar].innerText)
break;
}
}
}