Tengo una serie de imágenes. Se puede hacer clic en cada imagen y genera un mensaje. Las imágenes están en una matriz aleatoria. Todo esto funciona bien. Lo que no estoy logrando es lo siguiente: cuando se hace clic en la imagen, se vuelve obsoleta, por lo que quiero reemplazar la imagen en la que se puede hacer clic con una imagen nueva en la que no se puede hacer clic. He intentado usar el método array.splice de la siguiente manera newArray=myImages.splice(evt.target,1,newImage) Esto coloca la nueva imagen en la posición 0 en la nueva matriz y no en su posición original y no se produce ninguna imagen nueva para sobrescribir la imagen anterior. Estaría agradecido por cualquier ayuda.
Si suponemos que evt en newArray=myImages.splice(evt.target,1,newImage) es un objeto Event, evt.target es un elemento DOM , no un índice. Si esto está en el evento de clic que describe, será la imagen en la que se hizo clic.
El primer argumento de splice es el índice en el que realizar cambios; un número. Los elementos DOM no son números.
splice también devuelve una matriz de imágenes eliminadas, no una matriz actualizada. (A diferencia de métodos como map o slice , splice modifica la matriz a la que lo llama).
Puede encontrar el índice de la imagen anterior usando indexOf y luego splice con eso:
const index = myImages.indexOf(evt.target); if (index !== -1) { myImages.splice(index, 1, newImage); } o podría usar el map para crear una nueva matriz con la nueva imagen en lugar de la que hizo clic:
newArray = myImages.map(img => img === evt.target ? newImage : img);