How to handle event from multiple buttons of same name

Question

How to handle event from multiple buttons of same name

1.5k Views Asked by NJDave At 13 April 2025 at 20:47

I am working on a small practice program where I have 3 white boxes in a row. My goal is (using Javascript) for any of the boxes to change from white to red when the mouse is over the box, and then to turn yellow when the mouse comes off the box. The code below works on the initial box but not on the other two. When I put the mouse over the other boxes, it doesn't change them but it does change the color on the inital box. I've looked at similar questions but most of them involve jquery, which I am not using. I've done some research and possible solutions might involve using addEventListener or using "this". I don't want to give different names to the button id's and write additional procedures based on them -- that would be inefficient. I know there must be a more efficient way. Any advice is appreciated.

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Whiteboxes 5</title>
    <script type="text/javascript">     
    function changeColorOnMouseOver()
     {
    var control=document.getElementById("btn");
    control.style.background='red';
     }
     function changeColorOnMouseOut()
     {
    var control=document.getElementById("btn");
    control.style.background='yellow';
     }
    </script>
    <link rel="stylesheet" href="css/app5.css">
  </head>
  <body>

    <input type="button" value="" id="btn"
      onmouseover="changeColorOnMouseOver()"
      onmouseout="changeColorOnMouseOut()"/>

    <input type="button" value="" id="btn"
      onmouseover="changeColorOnMouseOver()"
      onmouseout="changeColorOnMouseOut()"/>

    <input type="button" value="" id="btn"
      onmouseover="changeColorOnMouseOver()"
      onmouseout="changeColorOnMouseOut()"/>

  </body>
</html>

Original Q&A

There are 3 best solutions below

James McDowell On 15 June 2015 at 20:14

I recommend using jQuery and changing the ID to CLALL.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Whiteboxes 5</title>
    <script type="text/javascript">     
    $(document).ready(function(){
      $(".btn").hover(function(){
        $(this).css("background-color","red");
      },function(){
        $(this).css("background-color","yellow");
      });
    });
    </script>
    <link rel="stylesheet" href="css/app5.css">
  </head>
  <body>

    <input type="button" value="" class="btn"/>

    <input type="button" value="" class="btn"/>

    <input type="button" value="" class="btn"/>

  </body>
</html>

JesseDahl On 15 June 2015 at 20:37

Per the HTML5 spec, id attributes must be unique in the document. http://www.w3.org/TR/html5/dom.html#the-id-attribute

If you just change the id attributes to class attributes, you can use the following answer and tweak it a little bit to do what you want (change the event from click to mouseover, etc).

JavaScript: Event listener for multiple buttons with same class name

**brso05** · Accepted Answer

You can use the this reference like so:

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Whiteboxes 5</title>
    <script type="text/javascript">     
    function changeColorOnMouseOver(control)
     {
         control.style.background='red';
     }
     function changeColorOnMouseOut(control)
     {
         control.style.background='yellow';
     }
    </script>
    <link rel="stylesheet" href="css/app5.css">
  </head>
  <body>

    <input type="button" value="" id="btn1"
      onmouseover="changeColorOnMouseOver(this)"
      onmouseout="changeColorOnMouseOut(this)"/>

    <input type="button" value="" id="btn2"
      onmouseover="changeColorOnMouseOver(this)"
      onmouseout="changeColorOnMouseOut(this)"/>

    <input type="button" value="" id="btn3"
      onmouseover="changeColorOnMouseOver(this)"
      onmouseout="changeColorOnMouseOut(this)"/>

  </body>
</html>

In html ID's should be unique. No 2 elements should have the same ID. this will refer to the caller element.

How to handle event from multiple buttons of same name

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in BUTTON

Related Questions in EVENT-HANDLING

Related Questions in ELEMENT

Trending Questions

Popular # Hahtags

Popular Questions