Erstellen eines JQuery-Rechners, Ändern von innerHTML, aber nichts geschieht

Ich mache einen JQuery-Rechner, wo durch Klicken auf Schaltflächen, die die Zahlen und Operatoren auf einem Taschenrechner darstellen, die innerHTML des Displays geändert wird, um die Schaltflächen anzuzeigen.Erstellen eines JQuery-Rechners, Ändern von innerHTML, aber nichts geschieht

Unten ist mein Code:

<!doctype html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
    <title> JQuery Calculator </title> 
    </head> 
<body> 

<style> 

    section { 
     padding: 2em; 
    } 

    .display { 
     height: 5em; 
     color: #333; 
    } 


</style> 

    <section id="calculator"> 
     <div class="display"> 

     </div> 

     <div id="numbersContainer"> 
      <table id="numbers"> 
       <tr> 
        <td> 
         <button class="number" id="one">1</button> 
        </td> 
        <td>  
         <button class="number" id="two">2</button> 
        </td> 
        <td> 
         <button class="number" id="three">3</button> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <button class="number" id="four">4</button> 
        </td> 
        <td>  
         <button class="number" id="five">5</button> 
        </td> 
        <td> 
         <button class="number" id="six">6</button> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <button class="number" id="seven">7</button> 
        </td> 
        <td>  
         <button class="number" id="eight">8</button> 
        </td> 
        <td> 
         <button class="number" id="nine">9</button> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <button class="number" id="zero">0</button> 
        </td> 
       </tr> 
      </table> 
      <table id="operators"> 
       <tr> 
        <td> 
         <button class="operator" id="plus">+</button> 
        </td> 
        <td>  
         <button class="operator" id="minus">-</button> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <button class="operator" id="divide">/</button> 
        </td> 
        <td> 
         <button class="operator" id="times">x</button> 
        </td> 
       </tr> 
      </table> 
     </div> 


    </section> 

    <script> 


     var storedCalculation; 

     $('.number, .operator').click(function() { 
      var numberOrOperator = event.target.innerHTML; 
      storedCalculation+=numberOrOperator; 
     }); 

     var calcScreen = $('.display').innerHTML; 
     calcScreen = storedCalculation; 


    </script> 

</body> 
</html>

und hier ist die jsfiddle davon: http://jsfiddle.net/ynf2qvqw/

Warum die innerHTML- der Anzeigeklasse ändert sich nicht?

Quelle

2015-07-06 mding5692

FYI, Ihre Schaltflächenelemente enthalten kein HTML, Sie sollten also nicht "innerHTML" verwenden. Sie haben nur Text, also wäre es sicherer, den Textinhalt zu verwenden, wahrscheinlich über '$ (event.target) .text()'. –

Probieren Sie http://codepen.io/mariusbalaba/pen/bGqhI – Hiero

http://jsfiddle.net/blaird/ynf2qvqw/2/

 var storedCalculation = ''; 

     $('.number, .operator').click(function() { 
      var numberOrOperator = $(this).html(); 
      storedCalculation += numberOrOperator; 
      $('.display').html(storedCalculation); 
     });

Sie verwenden innerHTML- falsch und Sie versuchen, Ihren Wert außerhalb Ihrer Klick-Funktion einzustellen.

Quelle

2015-07-06 20:38:20

jQuery-Objekte haben keine innerHTML Eigenschaft wie native JavaScript HTMLElements. Um ein jQuery-Objekts innere HTML zu ändern, müssen Sie die html() Methode, wie so verwenden:

$('.display').html(storedCalculation);

http://api.jquery.com/html/ Siehe für weitere Informationen.

Quelle

2015-07-06 20:36:25 sdgluck

innerHTML ist keine Eigenschaft von jQuery. Sie können entweder die innerHTML- durch Angabe der DOMElement von Ihrem Selektor Grabbing:

$('.display').get(0).innerHTML = storedCalculation;

oder Sie können die jQuery .html() verwenden Methode:

$('.display').html(storedCalculation)

Quelle

2015-07-06 20:38:50

'$ ('. Display'). Get (0)' ist formeller als '$ ('. Display') [0]'. –

Einverstanden, liest sauberer. Das Codebeispiel wurde aktualisiert. –

Zuerst müssen Sie die storedCalculation einstellen Variable auf einen Anfangswert, damit es im Allgemeinen besser funktioniert, andernfalls ist der Anfangswert "undefiniert".

var storedCalculation = "";

Das nächste Bit bleibt unverändert:

 $('.number, .operator').click(function() { 
      var numberOrOperator = event.target.innerHTML; 
      storedCalculation+=numberOrOperator;

Hier verwenden Sie jQuery html() -Methode. Der Parameter ist der Wert, den Sie festlegen möchten, in Ihrem Fall storedCalculation.

  var calcScreen = $('#display1').html(storedCalculation); 
     });

Ich hoffe, ich könnte helfen!

Quelle

2015-07-06 20:52:33 zero

Erstellen eines JQuery-Rechners, Ändern von innerHTML, aber nichts geschieht

Antwort

Verwandte Themen