在流星中制作计算器

Question

我正在自学如何使用 HTML/CSS/JavaScript 进行编码。我使用 Nitrous.io 作为我的 IDE 并使用 Meteor。我试图跟随并使用计算器教程，但是我决定最好自己尝试制作一个简单的计算器。但是我不确定如何使按钮相互通信，因此当用户按下“1”“+”“1”时，它会显示为“2”。我会将我的代码放在下面，如果有人可以向我解释，将不胜感激。非常感谢:)

现在我在网页上显示了按钮，但我无法让它们相互通信。

calculator.html

<template name="calculator">

    <div class="row">
    <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-4 col-xs-offset-4">
      <div class="row">
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
          <button id="button1" class="btn {{button1class}} buttonKeypad">1 </button>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
          <button id="button2" class="btn {{button2class}} buttonKeypad">2</button>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
          <button id="button3" class="btn {{button3class}} buttonKeypad">3</button>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
          <button id="buttonPlus" class="btn btn-warning buttonKeypad">+</button>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
          <button id="button4" class="btn {{button4class}} buttonKeypad">4</button>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
          <button id="button5" class="btn {{button5class}} 

等等，直到 buttonKeypad 9。

calculator.js

if (Meteor.isClient) {

  Session.set("string", "");

  Session.set("button1class", "btn-default");
  Session.set("button2class", "btn-default");
  Session.set("button3class", "btn-default");
  Session.set("button4class", "btn-default");
  Session.set("button5class", "btn-default");
  Session.set("button6class", "btn-default");
  Session.set("button7class", "btn-default");
  Session.set("button8class", "btn-default");
  Session.set("button9class", "btn-default");
  Session.set("submitclass", "btn-warning");

Template.calculator.helpers( {
   "string" : function () { return Session.get("string")},
"button1class" : function () { return Session.get("button1class")},
"button2class" : function () { return Session.get("button2class")},
"button3class" : function () { return Session.get("button3class")},
"button4class" : function () { return Session.get("button4class")},
"button5class" : function () { return Session.get("button5class")},
"button6class" : function () { return Session.get("button6class")},
"button7class" : function () { return Session.get("button7class")},
"button8class" : function () { return Session.get("button8class")},
"button9class" : function () { return Session.get("button9class")},
});


Template.calculator.events( {
    "click button": function() {
      Session.set("button1class", "btn-default");
      Session.set("button2class", "btn-default");
      Session.set("button3class", "btn-default");
      Session.set("button4class", "btn-default");
      Session.set("button5class", "btn-default");
      Session.set("button6class", "btn-default");
      Session.set("button7class", "btn-default");
      Session.set("button8class", "btn-default");
      Session.set("button9class", "btn-default");
    },
    });


Template.calculator.events( {
  "click #button1" : function() {
  Session.set("button1class", "btn-primary");
  Session.set("string", Session.get("string")+"1");
  },
  "click #button2" : function() {
  Session.set("button2class", "btn-primary");
  Session.set("string", Session.get("string")+"2");
  },
  "click #button3" : function() {
  Session.set("button3class", "btn-primary");
  Session.set("string", Session.get("string")+"3");
  },
  "click #button4" : function() {
  Session.set("button4class", "btn-primary");
  Session.set("string", Session.get("string")+"4");
  },
  "click #button5" : function() {
  Session.set("button5class", "btn-primary");
  Session.set("string", Session.get("string")+"5");
  },
  "click #button6" : function() {
  Session.set("button6class", "btn-primary");
  Session.set("string", Session.get("string")+"6");
  },
  "click #button7" : function() {
  Session.set("button7class", "btn-primary");
  Session.set("string", Session.get("string")+"7");
  },
  "click #button8" : function() {
  Session.set("button8class", "btn-primary");
  Session.set("string", Session.get("string")+"8");
  },
  "click #button9" : function() {
  Session.set("button9class", "btn-primary");
  Session.set("string", Session.get("string")+"9");
  },

  });

Answer 1

首先，您的代码比它需要的复杂得多。您不需要所有这些会话变量来设置计算器按钮的样式，您只需使用 css 类即可。 （例如，:hover 用于鼠标悬停，:active 用于被点击的按钮）。

如果你的计算器没有括号，生活就很简单。当用户输入一系列数字时，将它们放入缓冲区并显示在屏幕上。一旦用户触摸了一个操作数 (+-*/)，然后将缓冲区与操作数一起保存（例如，保存到会话变量中）。允许用户输入更多数字。当他们点击= 或新操作数时，评估挂起的操作。显示结果。