Matching values of arrays in Java script

Question

I have an event-listener that adds a new item to an array every time I click an image. How can I check if the item newly-added to the array matches an item in the other array?

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.

})

Hope I was able to explain the problem :)

A Set is probably a better choice here. If it has to be an array, check out Some — user2740650
– user2740650, Commented Jan 2, 2022 at 18:00
I've edited your question to try to improve the presentation (formatting the code as code, and correcting some typos); could you check the edited question to see if the question still asks what you intended to ask? — David Thomas
– David Thomas, Commented Jan 2, 2022 at 18:03
check array.includes, see w3schools.com/jsref/jsref_includes_array.asp — Fernando Garcia - Nandostyle
– Fernando Garcia - Nandostyle, Commented Jan 2, 2022 at 18:04
is the idea/code be like 2 grids, one with shuffled images and one with the expected ones to be clicked in and placed in b same order as a? i.e a game, or just a last clicked check? — Lawrence Cherone
– Lawrence Cherone, Commented Jan 2, 2022 at 18:08

about14sheep · Accepted Answer · 2022-01-02 18:30:40Z

1

If I understand correctly you want to check if the new item in b is equal to the item at the same position in a. You can this like so:

if (a[b.length - 1] === clicked) {
        //set green
} else {
        //set red
}

You can replace clicked with b[b.length - 1] if, when you are checking, clicked is out of scope.

If you are wanting to see if any item in a matches the clicked new item in b you can use the array.find method.

if(a.find( el => el === clicked)) {
   // set green
} else {
   // set red
}

Based on where the comments in the code are, it appears you want this logic to run inside that function. Which is why I have added a simple if block here

edited Jan 2, 2022 at 18:30

answered Jan 2, 2022 at 18:02

about14sheep

2,0892 gold badges14 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

about14sheep Over a year ago

I dont understand the downvotes here, if i am misunderstanding the question please explain and i will remove my answer. The answer being upvoted is simply how to use array.find and does not include the functionality OP is asking for??

MVB Over a year ago

thank you. that help me so much. I implemented it on my code and now it works perfect. Only problem I dont understand how it works. I use the a[b.length -1] === b[b.length -1]. Of course my code is more komplex then a and b but I thought it would be easier to explain like this. Thx and if you have time to explain how the code works in words i would be happy but either way thank you :)

KooiInc · Accepted Answer · 2022-01-02 18:08:11Z

0

You can use Array.find to check for the existence of an element in some Array. An example:

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

answered Jan 2, 2022 at 18:08

KooiInc

124k32 gold badges145 silver badges181 bronze badges

1 Comment

konsolebox Over a year ago

The question is not just about checking existing of an element.

konsolebox · Accepted Answer · 2022-01-02 19:34:55Z

You don't need another array to record the validity of the clicks; just a counter.

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>

Collectives™ on Stack Overflow

Matching values of arrays in Java script

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related