Создание калькулятора JQuery, изменение innerHTML, но ничего не происходит

Я делаю калькулятор jquery, где, щелкая по кнопкам, которые представляют числа и операторы в калькуляторе, внутреннийHTML дисплея изменится, чтобы отобразить нажатые кнопки.Создание калькулятора JQuery, изменение innerHTML, но ничего не происходит

Ниже мой код:

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

и вот jsfiddle его: http://jsfiddle.net/ynf2qvqw/

Почему innerHTML класса дисплея не меняется?

источник

2015-07-06 mding5692

FYI, элементы вашей кнопки не содержат HTML, поэтому вы не должны использовать 'innerHTML'. У них есть только текст, поэтому было бы безопаснее использовать текстовое содержимое, возможно, через '$ (event.target) .text()'. –

попробуйте 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); 
     });

Вы используете innerHTML неправильно, и вы пытаетесь установить значение за пределами вашей функции мыши.

источник

2015-07-06 20:38:20

Объекты jQuery не имеют свойства innerHTML, как родной JavaScript HTMLElements. Для того, чтобы изменить внутренний HTML объект JQuery, вы должны использовать метод html(), например, так:

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

См http://api.jquery.com/html/ для получения дополнительной информации.

источник

2015-07-06 20:36:25 sdgluck

внутреннийHTML не является собственностью jQuery. Вы можете либо установить innerHTML, захватывая DOMElement от вашего выбора:

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

или вы можете использовать JQuery .html() метод:

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

источник

2015-07-06 20:38:50

'$ ('. Display'). Get (0)' более формально, чем '$ ('. Display') [0]'. –

Согласен, читает чище. Обновлен образец кода. –

Во-первых, вам нужно установить storedCalculation переменная до начального значения, чтобы она работала лучше вообще, иначе начальное значение будет «неопределенным».

var storedCalculation = "";

Следующий бит остается неизменным:

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

Здесь используется метод JQuery HTML(). Параметр - это значение, которое вы хотите установить, в вашем случае storedCalculation.

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

Надеюсь, что смогу помочь!

источник

2015-07-06 20:52:33 zero

Создание калькулятора JQuery, изменение innerHTML, но ничего не происходит

ответ

Смежные вопросы