0

因此，我正在构建一个 JavaScript 计算器，并且我有类数字，并且每当单击该类时，它都会迭代一个代码序列，正如您在下面的 javascript 中看到的那样，但它不会检索它单击的那个的 innerHTML 值由于某些原因。我需要继续使用 ID 还是可以完成这项工作？

JavaScript

$(document).ready(function(){
    $('.numerical').on('click', function(){
        var innerDisp = document.getElementById('display').innerHTML;
        var num = document.getElementById(this).innerHTML;
        document.getElementById('display').innerHTML = innerDisp + num;
    });
});

HTML

<body>
    <center>
        <div id="calculator">
            <div id="display"></div>
            <button class="numerical" id="0">0</button>
            <button class="numerical" id="1">1</button>
            <button class="numerical" id="2">2</button>
            <button class="function" id="add">+</button>
            <button class="numerical" id="3">3</button>
            <button class="numerical" id="4">4</button>
            <button class="numerical" id="5">5</button>
            <button class="function" id="subtract">-</button>
            <button class="numerical" id="6">6</button>
            <button class="numerical" id="7">7</button>
            <button class="numerical" id="8">8</button>
            <button class="function" id="multiply">x</button>
            <button class="numerical" id="9">9</button>
            <button class="function" id="c">C</button>
            <button class="function" id="ce">CE</button>
            <button class="function" id="divide">/</button>
        </div>
    </center>
    <script src="calculator.js"></script>
</body>
4

2 回答 2

1

这个：

        var num = document.getElementById(this).innerHTML;

没有意义。在您的事件处理程序中，this将引用您的元素本身。没有必要再次获取它，即使有也不会这样做。

您正在使用 jQuery 进行编码，因此您的处理程序可以是这样的：

$('.numerical').on('click', function(){
    $('#display').html($(this).html());
    // or this:
    // $('#display').html(this.innerHTML); 
});
于 2013-09-22T19:35:28.390 回答
0

不要为此使用innerHtml。按钮是表单控件，只需使用它们的值 attr 并避免一遍又一遍地解析 DOM。

$(document).ready(function(){
    $('.numerical').on('click', function(){
        var clickednumber = $(this).val();
        $('#display').html($('#display').html()+clickednumber);
    });
});

<div id="calculator">
                <div id="display"></div>
                <button class="numerical" value="0">0</button>
                <button class="numerical" value="1">1</button>
                <button class="numerical" value="2">2</button>
                <button class="function" value="add">+</button>
                <button class="numerical" value="3">3</button>
                <button class="numerical" value="4">4</button>
                <button class="numerical" value="5">5</button>
                <button class="function" value="subtract">-</button>
                <button class="numerical" value="6">6</button>
                <button class="numerical" value="7">7</button>
                <button class="numerical" value="8">8</button>
                <button class="function" value="multiply">x</button>
                <button class="numerical" value="9">9</button>
                <button class="function" value="c">C</button>
                <button class="function" value="ce">CE</button>
                <button class="function" value="divide">/</button>
            </div>
        </center>
        <script src="calculator.js"></script>
于 2013-09-22T19:39:27.303 回答