Tengo un detector de eventos que agrega un nuevo elemento a una matriz cada vez que hago clic en una imagen. ¿Cómo puedo verificar si el elemento recién agregado a la matriz coincide con un elemento en la otra matriz?
let a = ['a', 'b', 'c', 'd'] let b = [] grid.addEventListner('click', (e) =>{ let clicked = e.target b.push(clicked) // Here is where I want to check if the variable "clicked" // which is pushed in to the b array matches // the value on the same position in the a array. So for // every click if its right I add a // green class and if // its not I add a red class and finish the possibility // to play. })Espero haber podido explicar el problema :)
Si entiendo correctamente, desea verificar si el nuevo elemento en b es igual al elemento en la misma posición en a. Puedes hacer esto así:
if (a[b.length - 1] === clicked) { //set green } else { //set red } Puede reemplazar clicked con b[b.length - 1] si, cuando está verificando, clicked está fuera del alcance.
Si desea ver si algún elemento en a coincide con el nuevo elemento en el que se clicked en b , puede usar el método array.find .
if(a.find( el => el === clicked)) { // set green } else { // set red }Según dónde están los comentarios en el código, parece que desea que esta lógica se ejecute dentro de esa función. Es por eso que he agregado un simple bloque if aquí
Puede usar Array.find para verificar la existencia de un elemento en algún Array . Un ejemplo:
const someArray = ['a', 'b', 'c', 'd']; const newElem = 'a'; const newElem2 = 'hello'; console.log(someArray.find(elem => elem === newElem) ? `${newElem} exists!` : `${newElem} is new!`); if (!someArray.find(elem => elem === newElem2)) { someArray.push(newElem2); } console.log(JSON.stringify(someArray));No necesita otra matriz para registrar la validez de los clics; solo un contador.
const buttonWrapper = document.getElementById('button_wrapper'); const a = ['a', 'b', 'c', 'd'].map(l => document.getElementById(`button_${l}`)); let counter = 0; buttonWrapper.addEventListener('click', e => { if (e.target.tagName === "BUTTON") { if (e.target === a[counter]) { buttonWrapper.classList.remove('red') buttonWrapper.classList.add('green'); counter = (counter + 1) % a.length; } else { buttonWrapper.classList.remove('green') buttonWrapper.classList.add('red'); counter = 0; } } }); #button_wrapper { display: table; padding: 10px; border: 4px solid #000; } #button_wrapper.red { border-color: red; } #button_wrapper.green { border-color: green; } <div id="button_wrapper"> <button id="button_a">Button A</button> <button id="button_b">Button B</button> <button id="button_c">Button C</button> <button id="button_d">Button D</button> </div>