Tworzenie kalkulatora JQuery, zmienianie innerHTML, ale nic się nie dzieje

Robię kalkulator jquery, gdzie klikając przyciski reprezentujące liczby i operatory kalkulatora, innerHTML ekranu zmieni się, odzwierciedlając kliknięte przyciski.Tworzenie kalkulatora JQuery, zmienianie innerHTML, ale nic się nie dzieje

Poniżej jest mój kod:

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

i tutaj jest jsfiddle niego: http://jsfiddle.net/ynf2qvqw/

Dlaczego jest innerHTML klasy wyświetlacza nie zmienia?

Źródło

2015-07-06 mding5692

Do Twojej wiadomości, elementy przycisków nie zawierają kodu HTML, więc nie powinieneś używać 'innerHTML'. Mają tylko tekst, więc bezpieczniej byłoby używać treści tekstowej, prawdopodobnie za pomocą '$ (event.target) .text()'. –

spróbuj http://codepen.io/mariusbalaj/pen/bGqhI – Hiero

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

 var storedCalculation = ''; 

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

Używasz innerHTML nieprawidłowo i próbuje ustawić wartość spoza funkcji kliknięcia.

Źródło

2015-07-06 20:38:20

Obiekty jQuery nie mają właściwości typu innerHTML, takiej jak natywne HTMLElements JavaScript. W celu zmodyfikowania wewnętrzną HTML obiektu jQuery, trzeba użyć metody html(), tak:

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

Zobacz http://api.jquery.com/html/ aby uzyskać więcej informacji.

Źródło

2015-07-06 20:36:25 sdgluck

innerHTML nie jest własnością jQuery. Można też ustawić innerHTML chwytając DOMElement z selektora:

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

lub można użyć jQuery .html() metoda:

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

Źródło

2015-07-06 20:38:50

'$ (" display "). Get (0)' jest bardziej formalny niż '$ (" display ") [0]'. –

Uzgodnione, czyta czystsze. Zaktualizowano próbkę kodu. –

Najpierw trzeba ustawić storedCalculation zmienna na wartość początkową, aby ogólnie lepiej działała, w przeciwnym razie wartość początkowa będzie "niezdefiniowana".

var storedCalculation = "";

Następny nieco pozostaje niezmieniona:

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

Tutaj HTML metody jQuery() użyć. Parametr jest wartością, którą chcesz ustawić, w twoim przypadku storedCalculation.

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

Mam nadzieję, że mogę pomóc!

Źródło

2015-07-06 20:52:33 zero

Tworzenie kalkulatora JQuery, zmienianie innerHTML, ale nic się nie dzieje

Odpowiedz

Powiązane problemy