HOW TO highlight the clicked button, without passing the id of the button?

Question

I have 4 buttons with same id (for css purpose) I want to highlight the button once it is clicked. By passing the id it is working fine, but I want to pass the names of the button (unique name). when i am trying getElementByNames() its not working. here is the code with DIFFERENT ID, i want this for different names

    <html>
   <head>
<style type="text/css">

</style>
<script type="text/javascript">
    var buttonClicked = null;
  function highlight(id)
   {
    if(buttonClicked != null)
    {
        buttonClicked.style.background = "grey";
        buttonClicked.style.color="black";
    }

     buttonClicked  = document.getElementById(id);
    buttonClicked.style.background =  "blue";
    buttonClicked.style.color="white";
   }
</script>
</HEAD>
<BODY>
<table width="100%" cellspacing="0" cellpadding="3px">
    <tr>
        <td>
                <input type="button" value="BUTTON" id="select1" name="select1"  onclick="highlight('select1')">
        </td>
        <td>
                <input type="button" value="BUTTON" id="select2" name="select2" onclick="highlight('select2')">
        </td>
        <td>
 <input type="button" value="BUTTON" id="select3" name="select3" onclick="highlight('select3')">
 </td>
 <td>
<input type="button" value="BUTTON" id="select4" name="select4"  onclick="highlight('select4')">
        </td>
    </tr>
</table>
</BODY>
</HTML>

ID are unique! You cannot have two elements with the same id or an element with two ids. Your css or js will always be buggy for this. If you want to reference more items with the same CSS rule refer to a common class! — Lelio Faieta, Jun 24 '15 at 07:57

score 2 · Answer 1 · answered Jun 24 '15 at 07:40

Your question is a bit unclear - you say "I have 4 buttons with same id" but in your code they have different IDs. If you really do "have 4 buttons with same id (for css purpose)" then:

Where you want to apply a CSS style to multiple elements, you should use a class rather than an ID. Then you can use unique IDs for your buttons, and your existing code will work well.

<style>
.myclass {
    color: red; // CSS rules for all these buttons
}
</style>

<input type="button" id="select1" class="myclass" ...
<input type="button" id="select2" class="myclass" ...

Asgaros · Answer 2 · 2015-06-24T07:53:08.820

0

You can use this code if you want to select an element by his name:

buttonClicked  = document.getElementsByName(id)[0];

It works fine as long as you can guarantee that the name will be unique because the first element will be taken. But its not the best approach ...

edited Jun 24 '15 at 07:53

answered Jun 24 '15 at 07:46

Asgaros

78
5

score 0 · Answer 3 · answered Jun 24 '15 at 08:14

Of course like Richie said, you should use a class for the css and define different ids. Anyway if you want to stick to the same ids you can use a different approach:

<script type="text/javascript">
var buttonClicked = null;

function highlight(element) {
    if (buttonClicked != null) {
        buttonClicked.style.background = "grey";
        buttonClicked.style.color = "black";
    }
    buttonClicked = element;
    buttonClicked.style.background = "red";
    buttonClicked.style.color = "white";
}
</script>
<table width="100%" cellspacing="0" cellpadding="3px">
<tr>
    <td>
        <input type="button" value="BUTTON1" id="select1" name="select1" onclick="highlight(this)" />
    </td>
    <td>
        <input type="button" value="BUTTON2" id="select2" name="select2" onclick="highlight(this)" />
    </td>
    <td>
        <input type="button" value="BUTTON3" id="select3" name="select3" onclick="highlight(this)" />
    </td>
    <td>
        <input type="button" value="BUTTON4" id="select4" name="select4" onclick="highlight(this)" />
    </td>
</tr>
</table>

Fiddle: http://jsfiddle.net/9nq39hov/

HOW TO highlight the clicked button, without passing the id of the button?

3 Answers3