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

【问题标题】：Making a JQuery calculator, changing innerHTML but nothing is happening制作一个 JQuery 计算器，更改 innerHTML 但没有任何反应
【发布时间】：2015-09-24 03:28:15
【问题描述】：

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

【问题讨论】：

仅供参考，您的按钮元素不包含 HTML，因此您不应使用 innerHTML。他们只有文本，所以使用文本内容会更安全，可能是通过$(event.target).text()。
试试codepen.io/mariusbalaj/pen/bGqhI

标签： javascript jquery html dom innerhtml

【解决方案1】：

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

        var storedCalculation = '';

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

您错误地使用了 innerHTML，并且您试图在 click 函数之外设置您的值。

【讨论】：

【解决方案2】：

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

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

更多信息请参见http://api.jquery.com/html/。

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

$('.display').get(0) 比 $('.display')[0] 更正式。

【解决方案4】：

首先，您需要将 storedCalculation 变量设置为初始值，以使其在一般情况下更好地工作，否则初始值将“未定义”。

var storedCalculation = "";

下一位保持不变：

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

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

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

希望我能帮上忙！

【讨论】：