Question 45487 in Html Question posted in
Some basic documentation can be found here.

Identify different buttons that have the same "onmouseover" function – Html

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>
Tags:

2

Answers


  1. 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
    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search