Matching a variable to an array of strings?

Question

So I have an array of strings (I think I did it right):

var editableObjects = ['.body-copy', 'img', '.subhead', '.meta', '.caption', '.hyperlink', '.bullet'];

A function that gets the element that is under the mouse:

function getMouseElement(event) {
    var posX = event.clientX,
    posY = event.clientY;
    // get the element that is located under the mouse 
   var overElem = document.elementFromPoint(posX, posY);
   return overElem;
}

And then this jquery listener that watches for mouseover on ".editable" elements:

$('#wrapper').on('mouseover', '.editable', function(event) {
var m = getMouseElement(event);
console.log(m.className); /*This correctly returns the tag of the element under the mouse*/
for (var c = editableObjects.length - 1; c >= 0; c--) {
    var o = editableObjects[c];
    if (m.className = o) {
        console.log(m + ' matches ' + o);
    } else {}
}
});

What I'm trying to do, is have the function look through the list and see if the element the mouse is over matches one of the string objects in editableObjects. My for-loop is supposed to check the variable for any of those matching elements, and then do something if there is a match. But after many hours, I can only get the for loop to return a match for every object in the variable, whether it actually matches or not.

The problem is the '=' rather then '==' in the if statement. A single '=' is an assignment operator whereas '==' is used to compare. — Raj
– Raj, Commented Jun 26, 2017 at 14:32
Perhaps I'm misunderstanding your intent, but if you need to determine when a mouseover event is fired over certain elements why not simply put the event listener on those elements rather than the parent and then figuring cursor position? i.e., $('.body-copy').on('mouseover',... $('.subhead').on('mouseover'... etc. — smilebomb
– smilebomb, Commented Jun 26, 2017 at 14:39
I would just make the second argument of the .on function a selector for the elements of your array. — James
– James, Commented Jun 26, 2017 at 14:51
These are dynamic elements, and from what I understand, they need delegated listeners on a containing element in order to be fired on events. I was trying to fire the delegated listener for mouseover on ".editable" class, which is a class that all these elements would have, but I needed it to check for certain types of elements for my function. — Aeromax
– Aeromax, Commented Jun 26, 2017 at 15:41

baao · Accepted Answer · 2017-06-26 14:30:17Z

2

You assign a value by using = in your if (m.className = o), to check for equality, use == or ===. It would also be easier to use a built in function than the loop. A simple indexOf() will do the trick:

$('#wrapper').on('mouseover', '.editable', function(event) {
    var m = getMouseElement(event);
    if (editableObjects.indexOf(m.className) > -1) {
        // ...
    }
});

or using es6 includes()

if (editableObjects.includes(m.className))

answered Jun 26, 2017 at 14:30

baao

73.5k18 gold badges152 silver badges209 bronze badges

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

2 Comments

Aeromax Over a year ago

I just tried altering the comparison to == or ===, and nothing is being returned now. I'm assuming now that it's a matter of my variable/object being created improperly, but not sure.

Aeromax Over a year ago

I just got something to work by swtiching the m.classname to m.localName. I'm able to match it to a tag, but not a class, yet. I need to be able to match the element to a list of tags or classes.

DIEGO CARRASCAL · Accepted Answer · 2017-06-26 14:32:16Z

0

Try this change:

$('#wrapper').on('mouseover', '.editable', function(event) {
  var m = getMouseElement(event);
  console.log(m.className); /*This correctly returns the tag of the 
  element under the mouse*/
  for (var c = editableObjects.length - 1; c >= 0; c--) {
     var o = editableObjects[c];
     if (m.className == o) {
        console.log(m + ' matches ' + o);
     } else {...}
   }
});

This line: if (m.className == o) { compare the values, while your line: if (m.className = o) { test if it can assign the value... that should put you in the right track.

answered Jun 26, 2017 at 14:32

DIEGO CARRASCAL

2,12916 silver badges16 bronze badges

Comments

Aeromax · Accepted Answer · 2017-06-26 16:25:54Z

Ok, got it. It seemed to have been a problem of the elements in my variable not being recognized correctly, I'm guessing because they are strings and not objects or actual elements. The "include" method works:

$('#wrapper').on('mouseover', '.editable', function(event) {
var m = getMouseElement(event);
// console.log(m.className); /*This correctly returns the class of the element under the mouse*/
for (var c = editableObjects.length - 1; c >= 0; c--) {
    var o = editableObjects[c];
    if (m.className.includes(o)) {
        console.log(m + ' matches ' + o);
        // addToolTips(m);
    } else if (m.localName.includes(o)) {
        console.log(m + ' matches ' + o);
        // addToolTips(m);
    }
}
});

Collectives™ on Stack Overflow

Matching a variable to an array of strings?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related