Question

我尝试为我的计算器找到最合适的解决方案，但是它不起作用。很快：当我输入任何值并单击在JS中由data-op提取的任何按钮时，我想在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

Answer 1

主要问题出在循环中：您正在使用this，但这不是您想要的。您应将其指定为buttons[i]来引用buttons数组中的元素。此外，您还有button[i]下方一行，而不是buttons[i]。最后一件事-您将需要将此功能用作() =>函数，而不是立即调用。因此，您的代码应如下所示：

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

Answer 2

未捕获的TypeError：this.getAttribute不是函数

在for循环中，this指向window。 this仅在onclick事件处理程序内引用元素。

此外，您正在将onclick循环内按钮的for属性分配为calc的返回值（未定义）。相反，您应该将op声明为全局变量，并在equals按钮上添加一个事件侦听器，以基于全局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>

如何使计算器有效

2 个答案: