0

I have a situation like this

<div id="Arabic-1:1" class="arabic-text translation-area" dir="rtl">
 بِسْمِ اللّهِ الرَّحْمـَنِ الرَّحِيمِ
 </div>

I want users to do double click on each arabic word and get a pop up showing the english meaning of that clicked word.

since each double click action can select only one word, and I have the definitions for each and every word, this plan will work however, I do not want to overload the HTML with so many ids and delimiters, and data attributes, making the size of the arabic division 10+ times the size.

For this I thought, identifying the index number of the words programmatically.

Placing an onclick event on the div itself and then figuring out was it the first, second, third or the forth arabic word clicked will suffice.

Since the div id "Arabic-1:1" already gives away the verse ref as chapter 1 verse 1, all you have to do is to figure out these index numbers programmatically

4بِسْمِ1 اللّهِ2 الرَّحْمـَنِ3 الرَّحِيمِ

is there an easy and smart way to do this? before I end up doing <span onclick=popMeaning("1.1.4")> الرَّحْمـَنِ</span> approach?

Haluk Karamete
  • 23
  • 4
  • Take a look at the [selection object](https://developer.mozilla.org/en-US/docs/Web/API/Selection). You could use that together with the `selectionchange` event. – Smurker Jul 28 '21 at 08:07
  • tooltip might be more user friendly in this case. – Mahendra Pratap Jul 28 '21 at 08:08
  • 1
    Welcome to Stack Overflow! Visit the [help], take the [tour] to see what and [ask]. Please first ***>>>[Search for related topics on SO](https://www.google.com/search?q=find+word+under+click+site:stackoverflow.com)<<<*** and if you get stuck, post a [mcve] of your attempt, noting input and expected output using the [`[<>]`](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor. – mplungjan Jul 28 '21 at 08:11

0 Answers0