JavaScript извлекает значение innerHTML из класса, который использует несколько тегов

Question

JavaScript извлекает значение innerHTML из класса, который использует несколько тегов

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>

George 22 сен. 2013, в 22:13

Источник

Теги:

javascript

jquery

html

2 ответа

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>

amenadiel 22 сен. 2013, в 17:01

Ещё вопросы

Pointy · Accepted Answer · 2013-09-22T17-01-00.000Z

Эта:

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

не имеет смысла. В обработчике событий this будет относиться к самому элементу. Нет необходимости снова получать его, и даже если бы это было, это не сделало бы этого.

Вы кодируете jQuery, поэтому ваш обработчик может быть следующим:

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