How to get the Highlighted/Selected text 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 get the Highlighted/Selected text 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 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 find the position of HTML elements in JavaScript ?

In this article, we are given an HTML document and the task is to get the position of any element by using JavaScript. Use the following steps to get the position: Step 1: Selecting an element: Before finding the position, it is necessary to select the required HTML element. Every element in HTML is

Javascript MouseEvent getModifierState() Method

The mouseEvent.getModifierState() method is used to determine the state of a specified modifier key at the time an event occurs. It returns true if the specified modifier key is being pressed, and false if it is not.The following modifier keys are active only while they are being pressed: AltControl

How to get selected option from Dropdown in jQuery ?

In this article, we learn how to get the selected option from the dropdown list. This article requires some familiarity with HTML, CSS, JavaScript, and jQuery. We can solve this challenge by using the jQuery val() method. The val() method in jQuery is used to set or return the value of an attribute