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没有改变？

Answer 1

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

        var storedCalculation = '';

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

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

Answer 2

jQuery对象没有像本地JavaScript HTMLElements那样的innerHTML属性。要修改jQuery对象的内部HTML，必须使用html()方法，如下所示：

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

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

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但没有发生任何事情

4 个答案: