制作 JQuery 计算器，更改 innerHTML 但没有任何反应

Question

我正在制作一个 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 class 没有变化？

Answer 1

jQuery 对象没有像原生 JavaScript HTML 元素那样的 innerHTML 属性。为了修改jQuery对象的内部HTML，你必须使用html()方法，像这样：

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

有关详细信息，请参阅 http://api.jquery.com/html/。

Answer 2

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

        var storedCalculation = '';

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

您错误地使用了 innerHTML，您正试图在点击功能之外设置您的值。

Answer 3

innerHTML 不是 jQuery 的属性。您可以通过从选择器中获取 DOMElement 来设置 innerHTML：

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

或者您可以使用 jQuery .html() 方法：

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

Answer 4

首先，您需要将 storedCalculation 变量设置为初始值，以便它在一般情况下更好地工作，否则初始值将为 "undefined"。

var storedCalculation = "";

下一位保持不变：

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

在这里，您使用 jQuery html() 方法。参数是您要设置的值，在您的情况下为 storedCalculation。

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

希望能帮到你！

制作 JQuery 计算器，更改 innerHTML 但没有任何反应

Making a JQuery calculator, changing innerHTML but nothing is happening

html

javascript

jquery

dom

innerhtml