2017-02-02 3 views
1

Я пытаюсь получить список всех элементов с определенным классом и иметь возможность определить, какой из них был нажат, и получить его innerHTML. В принципе, мой код теперь запускает функцию в любое время, когда элемент класса щелкнут, но мне нужен способ определения того, какой элемент был нажат. Вот то, что я до сих пор:Как получить innerHTML в элементе класса, идентифицированном mouseDown

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

Тем не менее расплывчатый. Отправьте пример! –

+0

Если вы хотите получить дескриптор элемента, который вы нажимаете, передайте параметр события через функцию onmousedown и вызовите event.target в функции getDigit ... elements [i] .onmousedown = function (event) – MCMXCII

ответ

3

Вы можете добавить event аргумент вашей elements[i].onmousedown функции, а именно:

elements[i].onmousedown = function(event) 

Тогда вы можете получить подробную информацию от события (и щелкнул элемент) изнутри вашей функции.

См. Пример http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_srcelement.

В вашем случае, вы могли бы получить innerHTML из щелкнутого элемента через event.target.innerHTML так:

elements[i].onmousedown = function(event) { 
    var elementInnerHTML = event.target.innerHTML; 
} 
Смежные вопросы