Identify different buttons that have the same "onmouseover" function

Question

I am trying to identify different buttons that have the same ID with different positions. I am trying to display a window next to the correct button, but so far it is only working with the first button, and when I try to add another button with the same ID as it should use the same function logic, it displays the div element next to the first button.

I was thinking maybe each button should have its own identifier and the function uses the code from identify different buttons that have the same "onclick" function name to search through the list of existing buttons and run the function at that button, however, I do not know how to do this. Here is my code as to what I have tried.

function displayInfo(){
  var coords = friend_button.getBoundingClientRect();
  var coordsOfInfo = $('.backgroundInfo').width();
  var subtractWidth = coords.left-coordsOfInfo;
  friend_info.style.left = subtractWidth+"px";
  friend_info.style.top = coords.top + "px";
  friend_info.style.display = "block";
  friend_button.addEventListener("mouseout", function(){
    friend_info.style.display = "none";
  });
};

<button type="button" class="friend-button" id="friend-button" onmouseover=displayInfo()>
    <div class="media">
    <img src="default-pic.png" class="mr-3" alt="Default Picture" width="50" height="50">
    </div>
    <div class="media-body">
        <h5 class="mt-0">Friend1</h5>
        <p>status: active</p>
    </div>
</button>
    <div class="friend_info" id="friend_info">
        <video autoplay muted loop class="backgroundInfo" id="backgroundInfo">
            <source src="Background.mp4" type="video/mp4">
        </video>
        <div class="d-flex">
            <img src="default-pic.png" class="profile-picture" alt="Default Picture" width="200" height="200">
            <div class="d-flex flex-column">
                <div class="p-2">
                    <h1 class="Friend_Name">Friend1</h1>
                </div>
                <div class="p-1">
                    <h5>status: active</h5>
                </div>
                <div class="p-9">
                    <p class="info">Name: Joesdadsadsadsadsa</p>
                    <p class="info">Surname: Smithdsadsadsadsadsa</p>
                    <p class="info">Phone Number: 07914836605</p>
                    <p class="info">Gender: Male</p>
                    <p class="info">Date of birth: 14/02/2003</p>
                </div>
            </div>
        </div>
    </div>

_"identify different buttons that have the same ID"_ Don't duplicate `id`s. [IDs must be globally unique](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) — Brian61354270, Feb 12 '23 at 23:17
`onmouseover="displayInfo(this)"` Then the argument to the function will be the specific button. — Barmar, Feb 12 '23 at 23:18
Related question: [Does ID have to be unique in the whole page?](https://stackoverflow.com/a/59232018/943435) And the answer is "only within the element's tree" in HTML5. — Yogi, Feb 12 '23 at 23:44

score 0 · Accepted Answer · answered Feb 12 '23 at 23:20

0

You should never have the same id for more than an element. Its meaning is Unique Identifier. By the way solution is to pass a parameter (the friend Id, or the name, an unique Id btw) from the hovering button.

onmouseover=displayInfo(frendId)

_

function displayInfo(frendId){    // do stuff

answered Feb 12 '23 at 23:20

voidbrain

351
1
3
13

My only problem is that this is for a website where the user will add friends, and when they do so, it will write to the html the button of the new friend to the window they see and add the friends information to the html also. I am not sure how I would make the ids different. I would be retrieving the information from a SQL database which I still havent learned but will in a few weeks time. – Jeremy Panthier Feb 12 '23 at 23:23
Aren't you already getting the friends info from the DB? If so getting also the Id is the way. Or you can use the array counter. How do you extract the friends info? Do you have an array? – voidbrain Feb 13 '23 at 08:09
I will probably use the databse logic to extract the id of the friend once I learn how mySQL works as for now though I am inputting the friends manually to see if the website will work the way I want to when more people get added as friends. – Jeremy Panthier Feb 13 '23 at 14:06

Dennis · Answer 2 · 2023-02-24T23:18:34.457

0

If I understand you correctly (there is a chance I don't) you need to pass event into a callback. This way you click the button and the correct info related to the specific (clicked) button will be passed.

<button type="button" class="friend-button" 
    id="friend-button" 
      onmouseover= "displayInfo(event)">

function displayInfo(event){
  let btn = event.target;
  var coords = btn.getBoundingClientRect();

As previously it was mentioned ID is unique, you should not use the same ID for different elements. Also. try not to use var, use either let to const.

edited Feb 24 '23 at 23:18

answered Feb 12 '23 at 23:32

Dennis

78
7

1

This and the comment posted on the question also work. Didn't know it was bad to use var. I was on an older version of javascript that didn't allow me to use const. Thanks for the advise! – Jeremy Panthier Feb 12 '23 at 23:36
`var` is not a great choice as it has a scope of window. – Dennis Feb 13 '23 at 00:15

Identify different buttons that have the same "onmouseover" function

2 Answers2