Question

所以我正在构建一个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>

Answer 1

此：

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

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

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

$('.numerical').on('click', function(){
    $('#display').html($(this).html());
    // or this:
    // $('#display').html(this.innerHTML); 
});

Answer 2

不要使用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>

JavaScript从使用多个标记的类中检索innerHTML值

2 个答案: