为什么我的 JavaScript 计算器不允许我计算 add/subtract 个数字？

Question

我的代码的问题是它不允许我将数字相加或相乘但它允许我点击它们。我想知道为什么它不允许我 add/multiply/subtract 这些数字在一起？它还不允许我在计算器的顶部输入它们。

var buttons = [];
var font;
var btn0;
var input;
var result;

function setup() {
  noCanvas();

  font = loadFont('AvenirNextLTPro-Demi.otf', 40);
  result = createP('&nbsp;');
  input = createInput('');
  buttons.push(result);
  buttons.push(input);
  createElement('br');
  buttons.push(createButton('&radic;'));
  buttons.push(createButton('('));
  buttons.push(createButton(')'));
  buttons.push(createButton('&larr;'));
  createElement('br');
  buttons.push(createButton('7'));
  buttons.push(createButton('8'));
  buttons.push(createButton('9'));
  buttons.push(createButton('&divide;'));
  createElement('br');
  buttons.push(createButton('4'));
  buttons.push(createButton('5'));
  buttons.push(createButton('6'));
  buttons.push(createButton('&times;'));
  createElement('br');
  buttons.push(createButton('1'));
  buttons.push(createButton('2'));
  buttons.push(createButton('3'));
  buttons.push(createButton('&minus;'));
  createElement('br');
  btn0 = createButton('0');
  buttons.push(btn0);
  buttons.push(createButton('.'));
  buttons.push(createButton('&plus;'));
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].style('padding', '10px 40px')
              .style('width', '120px')
              .style('box-sizing', 'border-box')
              .style('font-size', '2.5em')
              .style('background-color', 'rgb(0, 28, 60)')
              .style('color', 'rgb(255, 255, 255)')
              .style('border-style', 'solid')
              .style('border-color', 'rgb(255, 255, 255)')
              .style('cursor', 'pointer')
              .style('outline', 'none')
              .style('margin', '0')
              .style('font-family', font)
              .mousePressed(add);
  }
  btn0.style('width', '240px');
  input.style('font-size', '1.9em')
       .style('cursor', 'default')
       .style('width', '480px')
       .style('padding-left', '10px')
       .style('padding-right', '10px');
  result.style('width', '481px')
        .style('background-color', 'rgb(0, 120, 255)')
        .style('text-align', 'center')
        .style('font-size', '5em');
}

function add() {
  input.html(input.html() + this.html());
}

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
</head>

<body>
</body>

</html>

我希望计算器能够将数字一起输入并成为 added/multiplied。谢谢。

Answer 1

就将数字“输入”到输入中而言，问题是输入元素（由 createInput 在 p5js 中创建）不显示其 HTML 内容，即.html() 函数设置了什么。您想改用 .value() 函数：input.value(input.value() + this.html()).

至于执行加法和乘法等计算，我没有看到任何代码，因此您需要在某处添加代码，作为不同按钮的不同 mousePressed 处理程序，或者作为switch 现有 add 事件处理函数中的语句。

var buttons = [];
var font;
var btn0;
var input;
var result;

function setup() { 
  noCanvas();
  
  font = loadFont('AvenirNextLTPro-Demi.otf', 40);
  result = createP('&nbsp;');
  input = createInput('');
  buttons.push(result);
  buttons.push(input);
  createElement('br');
  buttons.push(createButton('&radic;'));
  buttons.push(createButton('('));
  buttons.push(createButton(')'));
  buttons.push(createButton('&larr;'));
  createElement('br');
  buttons.push(createButton('7'));
  buttons.push(createButton('8'));
  buttons.push(createButton('9'));
  buttons.push(createButton('&divide;'));
  createElement('br');
  buttons.push(createButton('4'));
  buttons.push(createButton('5'));
  buttons.push(createButton('6'));
  buttons.push(createButton('&times;'));
  createElement('br');
  buttons.push(createButton('1'));
  buttons.push(createButton('2'));
  buttons.push(createButton('3'));
  buttons.push(createButton('&minus;'));
  createElement('br');
  btn0 = createButton('0');
  buttons.push(btn0);
  buttons.push(createButton('.'));
  buttons.push(createButton('&plus;'));
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].style('padding', '10px 20px')
              .style('width', '80px')
              .style('box-sizing', 'border-box')
              .style('font-size', '2.5em')
              .style('background-color', 'rgb(0, 28, 60)')
              .style('color', 'rgb(255, 255, 255)')
              .style('border-style', 'solid')
              .style('border-color', 'rgb(255, 255, 255)')
              .style('cursor', 'pointer')
              .style('outline', 'none')
              .style('margin', '0')
              .style('font-family', font)
              .mouseReleased(add);
  }
  btn0.style('width', '240px');
  input.style('font-size', '1.9em')
       .style('cursor', 'default')
       .style('width', '480px')
       .style('padding-left', '10px')
       .style('padding-right', '10px');
  result.style('width', '481px')
        .style('background-color', 'rgb(0, 120, 255)')
        .style('text-align', 'center')
        .style('font-size', '5em');
} 

function add() {
  input.value(input.value() + this.html());
}

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
</head>

<body>
</body>

</html>

为什么我的 JavaScript 计算器不允许我计算 add/subtract 个数字？

Why does my JavaScript calculator not allow me to add/subtract numbers?

javascript

p5.js