时间戳

首页 > 解决方案 > 为什么我的 equalSign 函数在运行时不起作用？

javascript - 为什么我的 equalSign 函数在运行时不起作用？

问题描述

我正在尝试使用 javascript 和 HTML 构建一个基本的计算器网站。我的所有其他功能都正常工作，但我的 equalSign 功能没有做任何事情。不知道为什么它不起作用，为什么什么也没发生。为什么我的功能不起作用？它是 onclick 属性还是函数本身的实际代码？

let display = 0;

function square() {
  display = document.querySelector('#display').innerHTML
  display = display * display;
  document.querySelector('#display').innerHTML = display;
}

function cube() {
  display = document.querySelector('#display').innerHTML
  display = display * display * display;
  document.querySelector('#display').innerHTML = display;
}

function root() {
  display = document.querySelector('#display').innerHTML
  display = Math.sqrt(display);
  document.querySelector('#display').innerHTML = display;
}

function clearDisplay() {
  display = 0;
  document.querySelector('#display').innerHTML = display;
}

function seven() {
  display = document.querySelector('#display').innerHTML
  display = display + 7
  document.querySelector('#display').innerHTML = display;
}

function eight() {
  display = document.querySelector('#display').innerHTML
  display = display + 8
  document.querySelector('#display').innerHTML = display;
}

function nine() {
  display = document.querySelector('#display').innerHTML
  display = display + 9
  document.querySelector('#display').innerHTML = display;
}

function four() {
  display = document.querySelector('#display').innerHTML
  display = display + 4
  document.querySelector('#display').innerHTML = display;
}

function five() {
  display = document.querySelector('#display').innerHTML
  display = display + 5
  document.querySelector('#display').innerHTML = display;
}

function six() {
  display = document.querySelector('#display').innerHTML
  display = display + 6
  document.querySelector('#display').innerHTML = display;
}

function one() {
  display = document.querySelector('#display').innerHTML
  display = display + 1
  document.querySelector('#display').innerHTML = display;
}

function two() {
  display = document.querySelector('#display').innerHTML
  display = display + 2
  document.querySelector('#display').innerHTML = display;
}

function three() {
  display = document.querySelector('#display').innerHTML
  display = display + 3
  document.querySelector('#display').innerHTML = display;
}

function zero() {
  display = document.querySelector('#display').innerHTML
  display = display + 0
  document.querySelector('#display').innerHTML = display;
}

function decimal() {
  display = document.querySelector('#display').innerHTML
  display = display + '.'
  document.querySelector('#display').innerHTML = display;
}

function add() {
  num1 = document.querySelector('#display').innerHTML
  display = '+'
  document.querySelector('#display').innerHTML = display;
  let oper = '+';
  return oper;
}

function subtract() {
  num1 = document.querySelector('#display').innerHTML
  display = '-'
  document.querySelector('#display').innerHTML = display;
  let oper = '-';
  return oper;
}

function multiply() {
  num1 = document.querySelector('#display').innerHTML
  display = '*'
  document.querySelector('#display').innerHTML = display;
  let oper = '*';
  return oper;
}

function divide() {
  num1 = document.querySelector('#display').innerHTML
  display = '/'
  document.querySelector('#display').innerHTML = display;
  let oper = '/';
  return oper;
}

function equalSign(oper, num1) {
  num2 = document.querySelector('#display').innerHTML
  if (oper == '+') {
    let sum = num1 + num2;
    document.querySelector('#display').innerHTML = sum;
  } else if (oper == '-') {
    let sum = num1 - num2;
    document.querySelector('#display').innerHTML = sum;
  } else if (oper == '*') {
    let sum = num1 * num2;
    document.querySelector('#display').innerHTML = sum;
  } else if (oper == '/') {
    let sum = num1 / num2;
    document.querySelector('#display').innerHTML = sum;
  } else {
    document.querySelector('#dislay').innerHTML = "ERROR";
  }
}
<h1 class='bigbox' id="display">0</h1>
<div>
  <button class="button" style="font-size: 24px" onclick="square(); return         false">x²</button>
  <button class="button" style="font-size: 23px" onclick="cube(); return false">x³</button>
  <button class="button" style="font-size: 24px" onclick="root(); return false">√x</button>
  <button class="ce" onclick="clearDisplay(); return false">CE</button>
</div>
<div>
  <button class="button" onclick="seven(); return false">7</button>
  <button class="button" onclick="eight(); return false">8</button>
  <button class="button" onclick="nine(); return false">9</button>
  <button class="button" onclick="divide(); return false">/</button>
</div>
<div>
  <button class="button" onclick="four(); return false">4</button>
  <button class="button" onclick="five(); return false">5</button>
  <button class="button" onclick="six(); return false">6</button>
  <button class="button" style="font-size: 30px" onclick="multiply(); return false">*</button>
</div>
<div>
  <button class="button" onclick="one(); return false">1</button>
  <button class="button" onclick="two(); return false">2</button>
  <button class="button" onclick="three(); return false">3</button>
  <button class="button" onclick="subtract(); return false">-</button>
</div>
<div>
  <button class="button" onclick="zero(); return false">0</button>
  <button class="button" style="font-size: 50px" onclick="decimal(); return false">.</button>
  <button class="button" onclick="equalSign(oper); return false">=</button>
  <button class="button" onclick="add(); return false">+</button>
</div>

标签： javascripthtmlfunction

解决方案

你在这里遇到了两个问题。首先，equalSign用 2 个参数oper和声明num1，但你只传递一个oper。其次，oper在您尝试将其传递给equalSign按钮onClick函数之前，从未声明过。

我建议将按钮更改为：

 <button class="button" onclick="equalSign(); return false">=</button>

至于 JavaScript，我无法就如何重做它给出具体建议，因为我不知道您打算如何获得 num1，但是这两个参数equalSign可能应该是顶级变量，如displayis。

推荐阅读