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

Question

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

mdi*_*692 8 html javascript jquery dom innerhtml

我正在制作一个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>

Run Code Online (Sandbox Code Playgroud)

这是它的jsfiddle:http: //jsfiddle.net/ynf2qvqw/

为什么显示类的innerHTML没有改变？

Answer 1

Bar*_*ird 8

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

        var storedCalculation = '';

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

Run Code Online (Sandbox Code Playgroud)

您正在错误地使用innerHTML,并且您正试图在click函数之外设置您的值.

Answer 2

sdg*_*uck 6

jQuery对象没有innerHTML像本机JavaScript HTMLElements这样的属性.要修改jQuery对象的内部HTML,必须使用该html()方法,如下所示:

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

Run Code Online (Sandbox Code Playgroud)

有关更多信息,请参见http://api.jquery.com/html/.

归档时间：	10 年，4 月前
查看次数：	484 次
最近记录：	10 年，1 月前