Question

我试图获取具有某个类的所有元素的列表，并且能够识别哪个元素被点击并获得该元素innerHTML。基本上我的代码现在只要点击一个类元素就触发一个函数，但我需要一种方法来识别单击了哪个元素。这就是我到目前为止所拥有的：

<!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>

Answer 1

您可以在event函数中添加elements[i].onmousedown参数，即：

elements[i].onmousedown = function(event)

然后，您可以从函数中获取事件（以及单击元素）的详细信息。

有关示例，请参阅http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_srcelement。

在您的情况下，您可以通过event.target.innerHTML获取点击元素的innerHTML，如下所示：

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

如何在mouseDown标识的类元素上获取innerHTML

1 个答案: