Калькулятор выдает консольный журнал, но на экране ничего не отображается

Мне нужно построить этот калькулятор, используя JavaScript/jquery, однако на экране не будет отображаться никаких цифр, когда я нажимаю на кнопки, которые отображаются в журнале консоли без ошибок. Мне просто нужна помощь, чтобы выяснить, как отобразить числа на экран любая помощь приветствуется

function init(){
    
     console.log('start');
     var num1 = 0;
     var num2 = 0;
     var op = '';
     var ON = '';
    
     $('.digit, .operator orange').click(function(){
      var ID = this.id;
      console.log(ID);
      calculator(this);
    
    
    });
    
    function calculator(obj){
     console.log(ON);
     var ID = obj.id;
     var type = obj.classList[1];
    
     
     if(type === 'digit'){
      if (ON == true){
       $('#calculation').empty();
     }
    
      $('#calculation').append(ID);
      console.log(ID + '!')
      }else if(type === 'operator orange'){
      op =obj.textContent;
      if(num1 == 0){
      num1 = $('#calculation').text();
    
       
      }else{ 
      num2 = $('#calculation').text();
      num1 = eval(num1 + op + num2);
      }
      
      $('#calculation').empty();
         }else if (type ==='operator orange'){
      num2 = $('#calculation').text();
      num1 = eval(num1 + op + num2);
      $('#calculation').empty();
      $('#calculation').append(num1);
      ON = true;
      num1= 0;
      num2= 0;
       
    
      }else if(type === 'clear'){
      $('#calculation').empty();
      num1=0;
      num2=0;
      ON = false;
    
    
       }
    
    
       }
    
    }
    $(document).ready(init);
<html>
<head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
     <title>Calculator</title>
     <link rel="stylesheet" type="text/css" href="reset.css" />
     <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
     <div id="calculator">
      <div id="calculation">0</div>
      <div class="buttons">
       <ul>
        <li id="clear" class="clear darkgray">C</li>
        <li class="empty darkgray">&nbsp;</li>
        <li class="empty darkgray">&nbsp;</li>
        <li id="/" class="operator orange">/</li>
       </ul>
       <ul>
        <li id="7" class="digit">7</li>
        <li id="8" class="digit">8</li>
        <li id="9" class="digit">9</li>
        <li id="*" class="operator orange">*</li>
       </ul>
       <ul>
        <li id="4" class="digit">4</li>
        <li id="5" class="digit">5</li>
        <li id="6" class="digit">6</li>
        <li id="-" class="operator orange">-</li>
       </ul>
       <ul>
        <li id="1" class="digit">1</li>
        <li id="2" class="digit">2</li>
        <li id="3" class="digit">3</li>
        <li id="+" class="operator orange">+</li>
       </ul>
       <ul>
        <li id="0" class="digit wide nobottom">0</li>
        <li id="." class="digit nobottom">.</li>
        <li id= "=" class="equals orange nobottom">=</li>
       </ul>
      </div>
    
     </div>
     <script src="js.js"></script>
     </body>
    </html>

Источник

2 ответа

Проблема здесь

$('#calculation').append(num1);

Изменить.append на.text

Источник

var type = obj.classList[1]; никогда не вернется digit, поскольку этот класс находится в позиции 0. Вместо этого используйте атрибут (data-type="digit") или же classList.contains("digit")

С помощью classList.contains

При использовании class Атрибут для целевых элементов и тип или состояние магазина, я бы посоветовал использовать какой-то префикс, такой как js-, чтобы дифференцировать классы стиля и интерактивность.

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");

console.log("Div 1, type is digit:", div1.classList.contains("digit"));
console.log("Div 2, type is digit:", div2.classList.contains("digit"));
console.log("Div 3, type is digit:", div3.classList.contains("digit"));
<div id="div1" class="test digit something-else">1</div>
<div id="div2" class="digit something-else test">2</div>
<div id="div3" class="something-else test">3</div>

Используя data- атрибут

Сохранение состояния / типа в элементе может быть сделано в пользовательском атрибуте. Пользовательские атрибуты всегда начинаются с префикса data-, Основные преимущества:

  • Они не сталкиваются со стилем
  • Вы можете повторно использовать один атрибут для всех типов 

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");

var getType = function(el) {
   return el.getAttribute("data-type"); 
}

console.log("Div 1, type is:", getType(div1));
console.log("Div 2, type is:", getType(div2));
console.log("Div 3, type is:", getType(div3));
<div id="div1" data-type="digit" class="test something-else">1</div>
<div id="div2" data-type="digit" class="something-else test">2</div>
<div id="div3" data-type="otherType" class="something-else test">3</div>

Источник
Другие вопросы по тегам