mouseDownによって識別されるクラス要素でinnerHTMLを取得する方法

特定のクラスのすべての要素のリストを取得し、どの要素がクリックされたかを特定でき、その要素をinnerHTMLに取得しようとしています。基本的に私のコードは、クラス要素がクリックされるといつでも関数を実行しますが、どの要素がクリックされたかを識別する方法が必要です。ここで私がこれまで持っているものです。mouseDownによって識別されるクラス要素で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>

出典

2017-02-02 DCR

漠然としました。例を投稿してください！ –

クリックしている要素へのハンドルを取得するには、onmousedown関数でイベントパラメータを渡し、getDigit関数でevent.targetを呼び出します。elements [i] .onmousedown = function（event） – MCMXCII

あなたはつまり、あなたの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; 
}

出典

2017-02-02 17:48:18 Clorichel

mouseDownによって識別されるクラス要素でinnerHTMLを取得する方法

答えて

関連する問題