как сделать калькулятор действительным - PullRequest
Новая
       8

как сделать калькулятор действительным

0 голосов
/ 13 октября 2018

Я пытаюсь найти наиболее подходящее решение для моего калькулятора, но оно не работает.Коротко: когда я ввожу любое значение и нажимаю любую кнопку, которую я извлекаю при помощи data-op в JS, я хочу показать результат в result.innerHTML.Но он отказывается работать.вот мой JS: 

var first = document.querySelector('.first');
var second = document.querySelector('.second');
var result = document.querySelector('.result');

var btn = document.querySelector('.btn');

var buttons = document.querySelectorAll('input[type=button]');
 for(var i =0; i < buttons.length; i++) {
   var op = this.getAttribute('data-op');
   button[i].onclick = calc(op);
 }

function calc(op) {
   var val1 = parseInt(first.value);
   var val2 = parseInt(second.value);
   var res;
  if(op === '+') {
    res = val1 + val2;
  }
    if(op === '-') {
    res = val1 - val2;
  }
    if(op === '*') {
    res = val1 * val2;
  }
    if(op === '/') {
    res = val1 / val2;
  }
  result.innerHTML = res;
}

и вот мой HTML: 

<input type='text' class='first'>
<input type='button' value='+' class='plus' data-op='+'>
<input type='button' value='-' class='minus' data-op='-'>
<input type='button' value='*' class='mult' data-op='*'>
<input type='button' value='/' class='divide' data-op='/'>
<input type='text' class='second'>
<input type='button' value='=' class='btn'>
<span class='result'></span>

вот моя ссылка на кодовый указатель: https://codepen.io/ksena19/pen/ZqXYqQ

Ответы [ 2 ]

0 голосов
/ 13 октября 2018

Uncaught TypeError: this.getAttribute не является функцией

В цикле for this относится к window.this будет ссылаться на элемент только внутри обработчика события onclick.

Кроме того, вы присваиваете атрибут onclick кнопки внутри цикла for как возвращаемое значение calcкоторый не определен.Вместо этого вы должны объявить op как глобальную переменную и добавить прослушиватель событий для кнопки равенства, чтобы вычислить результат на основе глобальной переменной op.

На слегка не связанной ноте не следует использоватьнесколько if операторов при сравнении значения одной переменной;используйте структуру if, else if и else или оператор switch.

Рабочая демонстрация: 

var first = document.querySelector('.first');
var second = document.querySelector('.second');
var result = document.querySelector('.result');
var op;

var btn = document.querySelector('.btn');
btn.addEventListener('click', calc);

var buttons = document.querySelectorAll('input[data-op]');
[].slice.call(buttons).forEach(function(btn){
   btn.addEventListener('click', function(){
   op = this.getAttribute('data-op');
  })
});

function calc() {
   var val1 = parseInt(first.value);
   var val2 = parseInt(second.value);
   var res;
   if(op==null){
   	res = "No operation!"
   } else if(op === '+') {
    res = val1 + val2;
  } else if(op === '-') {
    res = val1 - val2;
  } else if(op === '*') {
    res = val1 * val2;
  } else if(op === '/') {
    res = val1 / val2;
  }
  result.innerHTML = res;
}
<input type='text' class='first'>
<input type='button' value='+' class='plus' data-op='+'>
<input type='button' value='-' class='minus' data-op='-'>
<input type='button' value='*' class='mult' data-op='*'>
<input type='button' value='/' class='divide' data-op='/'>
<input type='text' class='second'>
<input type='button' value='=' class='btn'>
<span class='result'></span>
0 голосов
/ 13 октября 2018

Основная проблема в вашем цикле: вы используете this, но это не то, что вы хотите.Вы должны указать его как buttons[i] для ссылки на элемент в массиве buttons.Кроме того, у вас также есть button[i] на одну строку ниже вместо buttons[i].Последнее, что вам нужно - это как func () =>, а не как немедленный вызов.Таким образом, ваш код должен выглядеть так: 

for(var i =0; i < buttons.length; i++) {
    var op = buttons[i].getAttribute('data-op');
    buttons[i].onclick = () => calc(op);
}
...