how to assign a js function to a class and get id when clicked

Question

I'm working on a calculator and have a mousedown and mouseup function on every id. Is there some way to clean that up and have a function called anytime a class element is clicked and be able to get the id that's been clicked inside the function?

here's a link to a myfiddle calculator

also, I noticed that when I placed my javascript directly in the JS box it didn't work, however as a script embedded in the html it works fine. Could someone explain why?

 <tr>
    <td class='noborder' colspan='1' rowspan='2'> </td>
    <td id='1' class='buttons' colspan='4' rowspan='2' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>1</td>
    <td id='2' class='buttons' colspan='4' rowspan='2' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>2</td>
    <td id='3' class='buttons' colspan='4' rowspan='2' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>3</td>
    <td id='plus' class='buttons' colspan='4' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>+</td>
    <td class='noborder' colspan='1' rowspan='2'> </td>
  </tr>


<script>
function mouseDown(id) {
document.getElementById(id).style.backgroundColor = "gray";
}

function mouseUp(id) {
document.getElementById(id).style.backgroundColor = "white";
}
</script>

I think this is what you are looking for: http://stackoverflow.com/questions/1250557/use-onmousedown-to-get-the-id-of-the-element-you-just-mousedowned-on — Albert-Jan, Feb 01 '17 at 23:07

score 1 · Answer 1 · edited Apr 15 '17 at 15:01

1

I realized a way how to add mousedown and mouseup events on all the elements with a class:

var elements = document.getElementsByClassName("buttons");
for (var i = 0; i < elements.length; i++) {
    elements[i].onmousedown = function() {
        mouseDown(this.id);
        mouseUp(this.id);
    }
}

I tested it on w3schools.com.

(Also, I don't know what you mean by JS Box. Sorry.)

edited Apr 15 '17 at 15:01

halfer

19,824
17
99
186

answered Feb 01 '17 at 23:21

Leonid

708
5
12

.. why do you call mouseDown and mouseUp in the `onmousedown` handler? – Heretic Monkey Feb 01 '17 at 23:24
is it true that that is exactly what he wanted? – Leonid Feb 01 '17 at 23:25
Well, his HTML shows `onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)"` and your code would do the equivalent of `onmousedown="mouseDown(this.id);mouseUp(this.id)"`, so I don't think so. – Heretic Monkey Feb 01 '17 at 23:27
We just need to move the mouseUp into a separate for loop and check for mouseUp event – DCR Feb 02 '17 at 12:35
no, this function doesn't work. basically, anytime a class element is clicked it fires off the function but I have no way of knowing which element was clicked – DCR Feb 02 '17 at 17:37

bgauryy · Answer 2 · 2017-02-01T23:32:31.590

0

Remove the script tag, and add this to your css style:

   .buttons:active {
    background-color: gray;
   }

For calculations use something like this:

<script>
var table = document.getElementsByTagName("table")[0]
table.addEventListener("click",clicked);

function clicked(el){
  if (el.hasClass("buttons")){
   //magic
}
}
</script>

edited Feb 01 '17 at 23:32

answered Feb 01 '17 at 23:12

bgauryy

416
3
7

That's really good but it only get's me so far. I obviously still need to pass the id or value that's been clicked into a js function to process – DCR Feb 01 '17 at 23:20

score 0 · Answer 3 · answered Feb 01 '17 at 23:13

It might be because you have an id conflict on the page. Using IDs like "1" is not recommended for this reason; better to be more specific.

In fact, there is no need to query the element by its ID anyway. You can operate directly on the element by just passing it into the handler. E.g.

<td class='buttons' onmousedown="mouseDown(this)" onmouseup="mouseUp(this)" >1</td>

<script>
function mouseDown(element) {
  element.style.backgroundColor = "gray";
}

function mouseUp(element) {
  element.style.backgroundColor = "white";
}
</script>

EDIT: As @bgaury mentioned, a CSS active pseudo class is a far better option for this use case however.

how to assign a js function to a class and get id when clicked

3 Answers3