How to Select an Element by ID in JavaScript ?

How to Get Selected Index on Mouseover in JavaScript ?

Last Updated : 10 May, 2024

To obtain the selected index on mouseover in JavaScript, attach event listeners to the parent container and utilize iteration through child elements to discover the index of the hovered element. By tracking the index of the hovered element during this process, you can determine the selected index accurately based on the mouseover event.

Approach

First, create a structure of the web page by using HTML elements, a parent <div> element with the id "parent" and several child <div> elements representing items.
JavaScript code attaches event listeners to each child <div> element inside the parent container.
When a mouseover event occurs on a child <div>, the code retrieves the index of that particular element within its parent container.
The code uses the parent container and its child elements to find out the position of the element the mouse is hovering over. It does this by looking at each child element one by one.
Once the position (index) of the hovered element is found, and result is displayed in the console.

Example: The example below shows how to get a selected index on mouseover in JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Iterating through Child Elements</title>
    <style>
        #parent {
            border: 1px solid black;
            padding: 10px;
        }

        div {
            padding: 5px;
            margin: 5px;
            border: 1px solid gray;
        }
    </style>
</head>

<body>
    <div id="parent">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>

    <script>
        let parentElement = document.getElementById('parent');
        let childElements = parentElement.children;

        for (let i = 0; i < childElements.length; i++) {
            childElements[i]
              .addEventListener('mouseover', function () {
                let selectedIndex = Array.from(this.parentNode.children)
                                         .indexOf(this);
                console.log(selectedIndex);
            });
        }
    </script>
</body>

</html>

Output:

imageMouseover — Output

How to Select an Element by ID in JavaScript ?

P

parthdollor

Improve

Article Tags :

Similar Reads

How to get the child node index in JavaScript?

The task is to get the index of child elements among other children. Here are a few techniques discussed. Approach 1: Select the child element of the parent element.Select the parent by .parentNode property.Use Array.prototype.indexOf.call(Children_of_parent, current_child) to get the index. Example

How to Select an Element by ID in JavaScript ?

In JavaScript, we can use the "id" attribute to interact with HTML elements. The "id" attribute in HTML assigns a unique identifier to an element. This uniqueness makes it easy for JavaScript to precisely target and manipulate specific elements on a webpage. Selecting elements by ID helps in dynamic

How to select DOM Elements in JavaScript ?

Selecting DOM (Document Object Model) elements is a fundamental aspect of web development with JavaScript. It allows developers to interact with and manipulate elements on a webpage dynamically. Proper selection of elements is crucial for tasks such as updating content, adding event listeners, or mo

How to Get Selected Value in Dropdown List using JavaScript?

A dropdown list is an HTML element that allows users to select one option from a list of options. The <select> and <option> tags are used to create dropdown lists in HTML. In this article, we will see how to get selected value from dropdown list using JavaScript. Basic HTML Structure for

How to get the Highlighted/Selected text in JavaScript?

There may be a need to find out the text selected/highlighted by the user. It can be done very easily using the window and document objects and their properties. Handling selected text is different for different browsers. The ways to get selected text are shown below: Method 1: window.getSelection p

How to move mouse pointer to a specific position using JavaScript ?

In this article, we will learn how to move the mouse pointer to any specific position in the web browser using JavaScript. Before we start, you need to know that it's not actually possible to move the mouse pointer to a position using JavaScript, such functionality can be easily misused, but we can

How to ignore mouse interaction on overlay image using JavaScript ?

Ignoring mouse interaction on overlay images can be controlled by a CSS property namely pointer-events. It is a property that defines if an element of the page will react to the pointer-events. Syntax: pointer-events: auto\none;Example: The following example demonstrates the use of pointer-events pr

JavaScript indexOf() method in an Object Array

In JavaScript, indexOf() methods provide the first index at which the given element exists, and -1 in case it is not present in the array. Syntax: indexOf(element)indexOf(element, start);Parameters: element: the element to be searched in the input arraystart: the index from which the search has to b

How to get the Position of mouse pointer in jQuery ?

In this article, we will see how to get the position of the mouse pointer using jQuery. To get the position of mouse pointer, event.pageX, and event.pageY property is used. The event.pageX property is used to find the position of the mouse pointer relative to the left edge of the document. The event

How to change the src attribute of an img element in JavaScript / jQuery ?

To change the src attribute of an image element in JavaScript or jQuery, you can dynamically update the image by setting a new value for the src attribute. Below are the methods to change the src attribute of an image element: Table of Content Using JavaScript DOM methodsUsing jQuery prop() MethodUs