Creazione di una calcolatrice JQuery, modifica innerHTML ma non succede nulla

Sto facendo una calcolatrice jquery, dove facendo clic sui pulsanti che rappresentano i numeri e gli operatori su una calcolatrice, loHTML interno dello schermo cambierà per riflettere i pulsanti su cui si fa clic.Creazione di una calcolatrice JQuery, modifica innerHTML ma non succede nulla

Qui di seguito è il mio codice:

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

e qui è la jsfiddle di esso: http://jsfiddle.net/ynf2qvqw/

Perché l'innerHTML della classe visualizzazione non cambia?

fonte

2015-07-06 mding5692

FYI, i tuoi elementi del pulsante non contengono HTML, quindi non dovresti usare 'innerHTML'. Hanno solo testo, quindi sarebbe più sicuro usare il contenuto del testo, probabilmente tramite '$ (event.target) .text()'. –

prova 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); 
     });

si sta utilizzando innerHTML in modo errato e si stanno cercando di impostare il valore al di fuori della vostra funzione di clic.

fonte

2015-07-06 20:38:20

Gli oggetti jQuery non hanno una proprietà innerHTML come HTMLElements nativi JavaScript. Per modificare HTML interno di un oggetto jQuery, è necessario utilizzare il metodo di html(), in questo modo:

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

Vedi http://api.jquery.com/html/ per ulteriori informazioni.

fonte

2015-07-06 20:36:25 sdgluck

innerHTML non è una proprietà di jQuery. È possibile impostare l'innerHTML afferrando il DOMElement dal selettore:

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

oppure è possibile utilizzare la .html jQuery () Metodo:

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

fonte

2015-07-06 20:38:50

'$ ('. Display'). Get (0)' è più formale di '$ ('. Display') [0]'. –

Concordato, legge più pulito. Aggiornato il codice di esempio. –

In primo luogo, è necessario impostare lo storedCalculation variabile su un valore iniziale perché funzioni meglio in generale, altrimenti il valore iniziale sarà "indefinito".

var storedCalculation = "";

Il bit successivo rimane inalterato:

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

Qui, si utilizza il metodo jQuery html(). Il parametro è il valore che si desidera impostare, nel tuo caso memorizzato Calcolo.

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

Spero di poterti aiutare!

fonte

2015-07-06 20:52:33 zero

Creazione di una calcolatrice JQuery, modifica innerHTML ma non succede nulla

risposta

Problemi correlati