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

Kobe · Accepted Answer · 2020-01-23 10:13:57Z

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, 2020 at 10:13

Kobe

6,4681 gold badge18 silver badges38 bronze badges

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

5 Comments

HamiD Over a year ago

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}

Kobe Over a year ago

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 Over a year ago

@hamid If you still don't understand something, let me know :)

HamiD Over a year ago

Thank you. Could you please explain a bit more how you declared o? I Understood locations.find but not after that.

Kobe Over a year ago

Sure. You can find the documentation for Array.prototype.find here. 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

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related