How to check the value of an array to another in javascript

Question

I'm creating a map; I want to add some informations to every location using Array. Ex: I have 3 divs and an Array which has three Length (informations for the divs). Now, whenever I mouse over on a div, it should compare the attribute (elID) to the Array, and get The informations like head or Paragraph out.

Ex of HTML:

<div  id="container">
        <div elID = "first">first</div>
        <div elID = "second">second</div>
        <div elID = "third">third</div>
</div>

What I've done in Javascript:

const locations = [
{"location": "first", "head":"This is first the head", "paragraph":"kommtNoch"},
{"location": "second", "head":"This is the second head", "paragraph":"kommtNoch"},
{"location": "third", "head":"This is the third head", "paragraph":"kommtNoch"} ]

const red = document.querySelectorAll('#container > div');

for(i=0; i<red.length;i++){

    red[i].setAttribute('onmouseover', 'myFirstFunction(this)');

    function myFirstFunction(e){

                if(e.classList === locations.indexOf()){
                    console.log(locations[i].location);
                }

I found some Answers here, but they're hard for me to understand:

Check if an array contains any element of another array in JavaScript

score 2 · Accepted Answer · answered Jan 23 '20 at 10:13

2

I'm not entirely sure what functionality you're looking for, but you can set an event listener on each element to listen for a mouseover event, and to get the elID, you can use getAttribute. To get the right object in your array, you can use find:

const locations = [
  {"location": "first", "head":"This is first the head", "paragraph":"kommtNoch"},
  {"location": "second", "head":"This is the second head", "paragraph":"kommtNoch"},
  {"location": "third", "head":"This is the third head", "paragraph":"kommtNoch"}
]

const red = document.querySelectorAll('#container > div');

const handleMouseOver = e => {
  const o = locations.find(o => e.target.getAttribute('elID') === o.location)
  e.target.innerText = o.head
}

red.forEach(el => el.addEventListener('mouseover', handleMouseOver))

<div id="container">
  <div elID="first">first</div>
  <div elID="second">second</div>
  <div elID="third">third</div>
</div>

Again, I'm not sure what you're trying to do, but it sounds like you'd also want to add more event listeners to handle a mouseleave event, to revert the changes.

answered Jan 23 '20 at 10:13

Kobe

6,226
1
14
35

You guys are awesome. Thanks. could you explain what you've done here please? const handleMouseOver = e => { const o = locations.find(o => e.target.getAttribute('elID') === o.location) e.target.innerText = o.head} – HamiD Jan 23 '20 at 10:19
1

Sure. First, I declare an anonymous function, which is just a fancy way of writing `function handleMouseOver(e) {}`. Inside the function, I declare `o`, which is shorthand for `object`. I use locations.find, which a builtin function for arrays. It loops over each object in the array, which I reference as `o`. I use `e.target.getAttribute('elID')`, which gets the `elID` value from the element that was just "mouseovered". If o.location is the same as this value, then find will return it. In the next line, I simple set the innerText of the mouseovered div equal to the returned object's head prop. – Kobe Jan 23 '20 at 10:25
@hamid If you still don't understand something, let me know :) – Kobe Jan 23 '20 at 10:27
Thank you. Could you please explain a bit more how you declared o? I Understood locations.find but not after that. – HamiD Jan 23 '20 at 10:48
1

Sure. You can find the documentation for `Array.prototype.find` [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find). It loops over each element in your array, and executes the callback function. If the callback function returns true, it will end the loop and return that object. What I have done is written another anonymous function. It could be rewritten as `function(o) { return e.target.getAttribute('elID') === o.location }`. `o` is the reference to the object in the array on each loop. You could name it however you want, but `o` is short for me – Kobe Jan 23 '20 at 10:53

How to check the value of an array to another in javascript

1 Answers1