制作一个JQuery计算器，改变innerHTML但没有发生任何事情

Question

I am making a jquery calculator, where by clicking on buttons that represent the numbers and operators on a calculator, the display's innerHTML would change to reflect the buttons clicked. 我正在制作一个jquery计算器，通过点击代表计算器上的数字和运算符的按钮，显示器的innerHTML将改变以反映点击的按钮。

Below is my 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>

and here is the jsfiddle of it: http://jsfiddle.net/ynf2qvqw/ 这是它的jsfiddle： http ： //jsfiddle.net/ynf2qvqw/

Why is the innerHTML of the display class not changing? 为什么显示类的innerHTML没有改变？

Answer 1

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

        var storedCalculation = '';

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

You are using innerHTML incorrectly and you are trying to set your value outside of your click function. 您正在错误地使用innerHTML，并且您正试图在click函数之外设置您的值。

Answer 2

jQuery objects do not have an innerHTML property like native JavaScript HTMLElements. jQuery对象没有像本机JavaScript HTMLElements那样的innerHTML属性。 In order to modify a jQuery object's inner HTML, you must use the html() method, like so: 要修改jQuery对象的内部HTML，必须使用html()方法，如下所示：

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

See http://api.jquery.com/html/ for more information. 有关更多信息，请参见http://api.jquery.com/html/ 。

Answer 3

innerHTML is not a property of jQuery. innerHTML不是jQuery的属性。 You can either set the innerHTML by grabbing the DOMElement from your selector: 您可以通过从选择器中抓取DOMElement来设置innerHTML：

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

or you can use the jQuery .html() method: 或者你可以使用jQuery .html（）方法：

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

Answer 4

First, you need to set the storedCalculation variable to an initial value for it to work better in general, otherwise the initial value will be "undefined". 首先，您需要将storedCalculation变量设置为初始值，以使其更好地工作，否则初始值将是“未定义”。

var storedCalculation = "";

The next bit stays unaltered: 下一位保持不变：

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

Here, you use jQuery html() method. 在这里，您使用jQuery html（）方法。 The paramter is the value you want to set, in your case storedCalculation. 参数是您要设置的值，在您的情况下为storedCalculation。

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

Hope I could help! 希望我能帮忙！

制作一个JQuery计算器，改变innerHTML但没有发生任何事情

问题描述

4 个解决方案

解决方案1
8 已采纳 2015-07-06 20:38:20

解决方案2
6 2015-07-06 20:36:25

解决方案3
2 2015-07-06 20:38:50

解决方案4
0 2015-07-06 20:52:33

制作一个JQuery计算器，改变innerHTML但没有发生任何事情

问题描述

4 个解决方案

解决方案1 8 已采纳 2015-07-06 20:38:20

解决方案2 6 2015-07-06 20:36:25

解决方案3 2 2015-07-06 20:38:50

解决方案4 0 2015-07-06 20:52:33

解决方案1
8 已采纳 2015-07-06 20:38:20

解决方案2
6 2015-07-06 20:36:25

解决方案3
2 2015-07-06 20:38:50

解决方案4
0 2015-07-06 20:52:33