Wie bekomme ich innerHTML auf ein Klassenelement, das durch mouseDown identifiziert wurde?

Ich versuche eine Liste aller Elemente mit einer bestimmten Klasse zu bekommen und in der Lage zu sein zu identifizieren, welche angeklickt wurde und bekomme diese innerHTML. Grundsätzlich löst mein Code jetzt eine Funktion aus, wann immer ein Klassenelement angeklickt wird, aber ich muss herausfinden, auf welches Element geklickt wurde. Hier ist, was ich bisher:Wie bekomme ich innerHTML auf ein Klassenelement, das durch mouseDown identifiziert wurde?

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

Quelle

2017-02-02 DCR

noch vage. Poste ein Beispiel! –

Wenn Sie ein Handle für das Element erhalten möchten, auf das Sie klicken, übergeben Sie den Ereignisparameter über die Funktion onmousedown und rufen Sie event.target in der Funktion getDigit auf ... elements [i] .onmousedown = function (event) – MCMXCII

Sie können ein event Argument Ihre elements[i].onmousedown Funktion hinzufügen, das heißt:

elements[i].onmousedown = function(event)

Dann können Sie Details erhalten von der Veranstaltung (und das angeklickt Element) aus deiner Funktion heraus.

Siehe http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_srcelement für ein Beispiel.

In Ihrem Fall würde Sie in der Lage sein innerHTML- des angeklickten Elements durch event.target.innerHTML wie folgt zu erhalten:

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

Quelle

2017-02-02 17:48:18 Clorichel

Wie bekomme ich innerHTML auf ein Klassenelement, das durch mouseDown identifiziert wurde?

Antwort

Verwandte Themen