防止在JS Calculator中双击

时间：2016-05-11 18:32:50

标签： javascript

我已经生成了一个JS计算器但是存在以下问题。

我想防止双击加号，减号，同时划分按钮。

我试过这样做

function myPlus(){
form.value += "+"
plus.onclick = ""
}

但它可以防止单击加号按钮。

我在这里添加了整个代码。

很乐意得到帮助！

https://jsfiddle.net/dbrtv1bg/ 

var form = document.getElementById("for");
var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");
var four = document.getElementById("four");
var five = document.getElementById("five");
var six = document.getElementById("six");
var seven = document.getElementById("seven");
var eight = document.getElementById("eight");
var nine = document.getElementById("nine");
var zero = document.getElementById("zero");
var plus = document.getElementById("plus");
var sum = document.getElementById("minus");
var ap = document.getElementById("ap");
var doub = document.getElementById("double");
var dd = document.getElementById("divide");
var calc = document.getElementById("got");

calc.onclick = myFunction;

one.onclick = myFunction1;

two.onclick = myFunction2;

three.onclick = myFunction3;

four.onclick = myFunction4;

five.onclick = myFunction5;

six.onclick = myFunction6;

seven.onclick = myFunction7;

eight.onclick = myFunction8;

nine.onclick = myFunction9;

zero.onclick = myFunction0;

plus.onclick = myPlus;

doub.onclick = myDouble;

sum.onclick = myFunction10;

dd.onclick = myFunctiondd;

ap.onclick = myAp;



function myFunction1() {
  form.value += "1";
}

function myFunction2() {
  form.value += "2";
}


function myFunction3() {
  form.value += "3";
}

function myFunction4() {
  form.value += "4";
}

function myFunction5() {
  form.value += "5";
}

function myFunction6() {
  form.value += "6";
}

function myFunction7() {
  form.value += "7";
}

function myFunction8() {
  form.value += "8";
}

function myFunction9() {
  form.value += "9";
}

function myFunction0() {
  form.value += "0";
}

function myPlus() {
  form.value += "+";

}



function myDouble() {
  form.value += "*"

}

function myFunction10() {
  form.value += "-"


}

function myFunctiondd() {
  form.value += "/"


}

function myAp() {
  form.value += "."

}

function myFunction() {
  var bec = eval(form.value);
  form.value = bec;

}
.general {
  width: 800px;
  height: 600px;
  background-color: rgb(121, 162, 168);
  padding: 50px;
}

.head {
  width: 300px;
  height: 100px;
  background-color: rgb(71, 86, 90);
  margin-top: 50px;
  margin: auto;
  margin-top: 20px;
}

.tools {
  width: 300px;
  height: 300px;
  background-color: white;
  margin: auto;
  padding-top: 1px;
  background-color: rgb(152, 192, 199);
  display: table;
}


}
.color {
  background-color: rgb(134, 181, 189);
}
.first {
  font-size: 30px;
  border: 1px rgb(152, 192, 199);
  width: 75px;
  text-align: center;
  font-family: TarusHeavy;
  background-color: rgb(134, 181, 189);
  color: white;
  padding-bottom: 15px;
  padding-top: 22px;
}
.second {
  font-size: 30px;
  border: 1px rgb(152, 192, 199);
  width: 75px;
  text-align: center;
  font-family: TarusHeavy;
  background-color: rgb(125, 204, 218);
  color: white;
  padding-bottom: 15px;
  padding-top: 22px;
}
input {
  float: right;
  margin-top: 65px;
  color: white;
  background-color: rgb(71, 86, 90);
  font-size: 20px;
  border: transparent;
  text-align: right;
}
<div class="head">
  <form action="" id="myForm">

    <input type="text" name="result" id="for" disabled>
  </form>
</div>
<div class="tools">
  <table>
    <tr>
      <td class="first" id="seven">7</td>
      <td class="first" id="eight">8</td>
      <td class="first" id="nine">9</td>
      <td class="second" id="divide">/</td>
    </tr>
    <tr>
      <td class="first" id="four">4</td>
      <td class="first" id="five">5</td>
      <td class="first" id="six">6</td>
      <td class="second" id="double">x</td>
    </tr>
    <tr>
      <td class="first" id="one">1</td>
      <td class="first" id="two">2</td>
      <td class="first" id="three">3</td>
      <td class="second" id="minus">-</td>
    </tr>
    <tr>
      <td class="first" id="zero">0</td>
      <td class="first" id="ap">,</td>
      <td class="second" id="got">=</td>
      <td class="second" id="plus">+</td>
    </tr>
  </table>
</div>
</div>
</div>

3 个答案:

答案 0 :(得分：2)

我建议将数字和符号的所有函数合并为：

var value = document.getElementById('value');
var numbers = document.getElementsByClassName('number');
var symbols = document.getElementsByClassName('symbol');
var evaluate = document.getElementById('got');
var lastClicked = 'symbol';

Array.from(numbers).forEach(function(numberElement) {
  var numberValue = numberElement.textContent;
  numberElement.addEventListener('click', function() {
    lastClicked = 'number';
    value.value += numberValue;
  });
});

Array.from(symbols).forEach(function(numberElement) {
  var symbolValue = numberElement.textContent;
  numberElement.addEventListener('click', function() {
    if (lastClicked !== 'symbol') {
      lastClicked = 'symbol';
      value.value += symbolValue;
    }
  });
});

evaluate.addEventListener('click', function () {
  value.value = eval(value.value);
});

然后，您可以更改所有数字以使数字类和符号具有符号类。

然后在符号点击事件中，您检查最后一次点击。

请参阅下面的工作示例：

＆＃13;
＆＃13; 
var value = document.getElementById('value');
var numbers = document.getElementsByClassName('number');
var symbols = document.getElementsByClassName('symbol');
var evaluate = document.getElementById('got');
var lastClicked = 'symbol';

Array.from(numbers).forEach(function(numberElement) {
  var numberValue = numberElement.textContent;
  numberElement.addEventListener('click', function() {
    lastClicked = 'number';
    value.value += numberValue;
  });
});

Array.from(symbols).forEach(function(numberElement) {
  var symbolValue = numberElement.textContent;
  numberElement.addEventListener('click', function() {
    if (lastClicked !== 'symbol') {
      lastClicked = 'symbol';
      value.value += symbolValue;
    }
  });
});

evaluate.addEventListener('click', function () {
  value.value = eval(value.value);
});
＆＃13; 
.general {
  width: 800px;
  height: 600px;
  background-color: rgb(121, 162, 168);
  padding: 50px;
}

.head {
  width: 300px;
  height: 100px;
  background-color: rgb(71, 86, 90);
  margin-top: 50px;
  margin: auto;
  margin-top: 20px;
}

.tools {
  width: 300px;
  height: 300px;
  background-color: white;
  margin: auto;
  padding-top: 1px;
  background-color: rgb(152, 192, 199);
  display: table;
}


}
.color {
  background-color: rgb(134, 181, 189);
}
.first {
  font-size: 30px;
  border: 1px rgb(152, 192, 199);
  width: 75px;
  text-align: center;
  font-family: TarusHeavy;
  background-color: rgb(134, 181, 189);
  color: white;
  padding-bottom: 15px;
  padding-top: 22px;
}
.second {
  font-size: 30px;
  border: 1px rgb(152, 192, 199);
  width: 75px;
  text-align: center;
  font-family: TarusHeavy;
  background-color: rgb(125, 204, 218);
  color: white;
  padding-bottom: 15px;
  padding-top: 22px;
}
input {
  float: right;
  margin-top: 65px;
  color: white;
  background-color: rgb(71, 86, 90);
  font-size: 20px;
  border: transparent;
  text-align: right;
}
＆＃13; 
<div class="head">
  <form action="" id="myForm">

    <input type="text" name="result" id="value" disabled>
  </form>
</div>
<div class="tools">
  <table>
    <tr>
      <td class="first number" id="seven">7</td>
      <td class="first number" id="eight">8</td>
      <td class="first number" id="nine">9</td>
      <td class="second symbol" id="divide">/</td>
    </tr>
    <tr>
      <td class="first number" id="four">4</td>
      <td class="first number" id="five">5</td>
      <td class="first number" id="six">6</td>
      <td class="second symbol" id="double">*</td>
    </tr>
    <tr>
      <td class="first number" id="one">1</td>
      <td class="first number" id="two">2</td>
      <td class="first number" id="three">3</td>
      <td class="second symbol" id="minus">-</td>
    </tr>
    <tr>
      <td class="first number" id="zero">0</td>
      <td class="first symbol">.</td>
      <td class="second evaluate" id="got">=</td>
      <td class="second symbol" id="plus">+</td>
    </tr>
  </table>
</div>
＆＃13;
＆＃13;
＆＃13;

这里还有一个小提琴，供参考：https://jsfiddle.net/dbrtv1bg/5/

答案 1 :(得分：1)

您可以尝试的一件事是声明一个变量，例如“operatorClicked”跟踪操作员是否被点击。将其初始化为false。在运算符函数中，包括if条件 - 如果operatorClicked为真，则不执行任何操作。如果为false，则追加运算符并将operatorClicked设置为true。如果你走这条路线，每次点击一个号码时你还需要将operatorClicked重置为假。

答案 2 :(得分：0)

谢谢大家！我这样得到了解决方案

我在函数中回忆myPlus，myDOuble等函数，这些函数给出了数字值并且有效:) 

00:00

https://jsfiddle.net/agxvvr73/

相关问题
最新问题