CODEWITHSUNDEEP
javascripthtml
Nanoo
Nanoo

Reputation: 903

Detect mouseover event on multiple elements (JS)

I am trying to detect the mouseover event on multiple elements, preferably by class.

For example:

<div class="myElement">1</div>
<div class="myElement">2</div>
<div class="myElement">3</div>
<div class="myElement">4</div>

selectClass("myElement").onmouseover = function() {
    console.log("Detected mouse!");
}​;

Upvotes: 0

Views: 1409

Answers (3)

Boris Michourin
Boris Michourin

Reputation: 41

Here is a working version:

document.querySelectorAll(".your_class").forEach(elem => {
    elem.addEventListener("mouseover", () => {
         doSomeThing();
    })
    elem.addEventListener("mouseout", () => {
         secondThing();
    })
});

Upvotes: 0

54ka
54ka

Reputation: 3589

I hope I've been helpful

var x = document.getElementsByClassName("myElement");

for (let i = 0; i < x.length; i++) {
    x[i].setAttribute("onmouseover", "hoho()")    
}

function hoho() {
    console.log("mouse")
}

Upvotes: 0

lusc
lusc

Reputation: 1406

With the code below you get all the elements with the classname "myElement" and loop over them. The loop adds an event listener so when you click on the element it calls the function elementClicked which in return logs "An element was clicked!" to the console.

var elements = document.getElementsByClassName('myElement');

function elementClicked() {
    console.log("An element was clicked!");
}
for (let i = 0; i < elements.length; i++) {
    elements[i].onmouseover = function() {
        elementClicked();
    };
}

Upvotes: 1

Related Questions