如何在由 mouseDown 识别的 class 元素上获取 innerHTML

Question

我正在尝试获取具有特定 class 的所有元素的列表，并能够识别单击了哪个元素并获取那个元素的 innerHTML。基本上我的代码现在只要单击 class 元素就会触发一个函数，但我需要一种方法来识别单击了哪个元素。这是我目前所拥有的：

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

您可以向 elements[i].onmousedown 函数添加一个 event 参数，即：

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 识别的 class 元素上获取 innerHTML

How to get innerHTML on a class element identified by mouseDown

javascript

innerhtml