CODEWITHSUNDEEP
javascriptinnerhtml
DCR
DCR

Reputation: 15665

How to get innerHTML on a class element identified by mouseDown

I'm trying to get a list of all elements with a certain class and be able to identify which one was clicked and get that one's innerHTML. Basically my code now fires of a function anytime a class element is clicked but I need a way of identifying which element was clicked. Here's what I have so far:

<!DOCTYPE html>
<header>
   <title>Calculator</title>
   <link rel="stylesheet" href="calc.css">
</header>
<body>
    <main>
        <section>
            <table>
                <tr>
                    <td class = 'noborder' colspan = '18'>&nbsp</td>
                </tr>
                <tr>
                    <td class = 'noborder' colspan = '1'>1&nbsp</td>
                    <td id = 'result' colspan = '16' rowspan='2' >0.00 </td>
                    <td class = 'noborder' colspan = '1'>2&nbsp</td>
                </tr>
                <tr>
                    <td class = 'noborder' colspan = '1'>3&nbsp</td>
                    <td class = 'noborder' colspan = '1'>4&nbsp</td>
                </tr>
                <tr>
                    <td class = 'noborder' colspan = '1' rowspan = '2'> </td>
                    <td class = 'numbers'  colspan = '4' rowspan = '2'>1    </td>
                    <td class = 'numbers'  colspan = '4' rowspan = '2'>2    </td>
                    <td class = 'numbers'  colspan = '4' rowspan = '2'>3    </td>
                    <td class = 'operator' colspan = '4'>+</td>
                    <td class = 'noborder' colspan = '1' rowspan='2'>     </td>
                </tr>
                <tr>
                    <td class = 'operator' colspan = '4'>-    </td>
                </tr>
                <tr>
                    <td class = 'noborder' colspan = '1' rowspan = '2'>     </td>
                    <td class = 'numbers'  colspan = '4' rowspan = '2'>4    </td>
                    <td class = 'numbers'  colspan = '4' rowspan = '2'>5    </td>
                    <td class = 'numbers'  colspan = '4' rowspan = '2'>6    </td>
                    <td class = 'operator' colspan = '4'>/    </td>
                    <td class = 'noborder' colspan = '1' rowspan='2'>     </td>
                </tr>
                <tr>
                    <td class = 'operator'  colspan = '4'>*    </td>
                </tr>
                <tr>
                    <td class = 'noborder' colspan = '1' rowspan = '2'>     </td>
                    <td class = 'numbers'  colspan = '4' rowspan = '2'>7    </td>
                    <td class = 'numbers'  colspan = '4' rowspan = '2'>8    </td>
                    <td class = 'numbers'  colspan = '4' rowspan = '2'>9    </td>
                    <td class = 'operator' colspan = '4'>%    </td>
                    <td class = 'noborder' colspan = '1' rowspan = '2'>     </td>
                </tr>
                <tr>
                    <td class = 'noborder' colspan = '4'>&nbsp</td>

                <tr>
                    <td class = 'noborder' colspan = '1' rowspan = '2'>     </td>
                    <td class = 'other' colspan = '4' rowspan = '2'>+/-  </td>
                    <td class = 'numbers'  colspan = '4' rowspan = '2'>0    </td>
                    <td class = 'other'    colspan = '4' rowspan = '2'>.    </td>
                    <td class = 'operator' colspan = '4'>clear</td>
                    <td class = 'noborder' colspan = '1' rowspan='2'>     </td>
                </tr>
                <tr>
                    <td class = 'operator' colspan = '4'>=    </td>
                </tr>
                <tr>
                    <td class ='noborder'  colspan = '18'>&nbsp</td>
                </tr>
            </table>
        </section>
    </main>

<script>
var result = 0.00;
var firstNumber;
var decimalPlace = false;

var elements = document.getElementsByClassName("numbers");
for (var i = 0; i < elements.length; i++) {
   elements[i].onmousedown = function() {

    getDigit(i);
}
}

function getDigit(i){

  document.write(i);  //just for testing
}    
</script>          
</body>
</html>

Upvotes: 1

Views: 299

Answers (1)

Clorichel
Clorichel

Reputation: 2070

You can add an event argument to your elements[i].onmousedown function, ie:

elements[i].onmousedown = function(event)

Then you are able to get details from the event (and the clicked element) from within your function.

See http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_srcelement for an example.

In your case, you would be able to get innerHTML of the clicked element through event.target.innerHTML like this:

elements[i].onmousedown = function(event) {
    var elementInnerHTML = event.target.innerHTML;
}

Upvotes: 3

Related Questions