1

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;
        }
    
    }

}


2 respuestas 2

1

Una opción muy similar a la de @WinterOwl es la de guardar los indices de los "p" origianes en un array, e ir eliminandolas de ese array, no del de párrafos, esto podría servir si queremos hacer otras interacciones distintas e independientes con los mismos parrafos, [...document.querySelectorAll("p")] permanecería siempre igual:

const btn = document.getElementById("btn")
const paraContent = document.getElementById("para-content")


for (let i = 0; i <= 5; i++) {
  let paragraph = document.createElement("p")
  paragraph.textContent = i
  paraContent.appendChild(paragraph)
}

let arrayContentPara = [...document.querySelectorAll("p")]

let indicesP = arrayContentPara.map((e, i) => i);// <-- Los índices de los "p" como valores

btn.addEventListener("click", (e) => {

  if (!indicesP.length) {
    indicesP = arrayContentPara.map((e, i) => {
      e.style.color = "black";
      e.style.fontSize = "1rem";
      return i;
    });
  }

  let aleatorio = Math.floor(Math.random() * indicesP.length);

  recorrerArray(aleatorio);

})

const recorrerArray = (azar) => {

  arrayContentPara[indicesP[azar]].style.color = "red";
  arrayContentPara[indicesP[azar]].style.fontSize = "2rem";
  indicesP.splice(azar, 1);

}
<button id="btn">
  boton
</button>
<div id="para-content">
</div>

1

Basado en lo que describes en tu pregunta me parece que no es necesario "crear un numero aleatorio sin repetir", si no mas bien evitar que el mismo párrafo se trate de pintar de nuevo.

Archivo JS:

const btn = document.getElementById("btn");
const cln = document.getElementById("clean");
const paraContent = document.getElementById("para-content");
let arrayContentPara = [];

const start = () => {
    paraContent.innerHTML = '';
    
    for (let i = 1; i <= 10; i++) {
        let paragraph = document.createElement("p")
        paragraph.textContent = i
        paraContent.appendChild(paragraph)
    }
    
    arrayContentPara = [...document.querySelectorAll("p")];
}

cln.addEventListener("click", event => start());

btn.addEventListener("click", event => {
    let aleatorio = Math.floor((Math.random()*arrayContentPara.length))
    arrayContentPara.length && modifyParagraph(aleatorio)
})

const modifyParagraph = azar =>   {
    arrayContentPara[azar].style.color ="red";
    arrayContentPara[azar].style.fontSize ="2rem";
    arrayContentPara.splice(azar,1);
}

//------------START THE PROGRAM
start();

Archivo HTML:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div id="para-content"></div>
        <button id="btn">Color</button>
        <button id="clean">Clean</button>
        <script src="index.js"></script>
    </body>
</html>

La explicación es así, al obtener todos los párrafos con querySelectorAll use el operador spread para pasarlo de una NodeList a un array común, esto con el fin de usar el método splice que las NodeList no poseen. Después cada que se le haga click al botón color se generara el numero aleatorio entre 0 y la longitud del array menos 1 con el método Math.random, se llama el metodo modifyParagraph y se pinta el elemento correspondiente al arreglo basado en el numero aleatorio. Por ultimo con el método splice saco ese elemento del arreglo y la próxima vez genere un numero aleatorio será con la nueva longitud del array y se pintara un párrafo distinto. Agregue también un botón clean por si necesitas reiniciar el programa.

1
  • 1
    si muchas gracias bro Commented el 17 jun. 2021 a las 15:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.