0
私はFreeCodeCamp電卓を構築しています。それはほとんど終わった。私はいくつかのことを磨くだけです。しかし、私を悩ましている主な問題は、数字を押すと歴史領域が消えた理由です...履歴が消えるのを防ぐ方法
私は1人が複数の数字を押してから演算子を押すように電卓をコード化しようとしました例えば "x"、 "+"などの場合、すでに入力された数字が履歴エリアに移動します。私は、複数の数字をクリックするとゼロが消えていることに気づいた。また、小数点をクリックしたときも同じです。 "小数点の場合、最初のシナリオでは、 "。"を押すとゼロは消えませんでしたが、数字を押すとゼロが消えます。 2番目のシナリオでは、最初に数字を押してから小数点を押すとゼロが消えます。
どうすれば修正できますか？私はこのゼロ問題を解決し
$(document).ready(function() {
var mainMath = "0";
var subMath = "0";
var reset = "";
update();
$("button").click(function(){
calculate($(this).attr("value"));
});
function calculate(keyitem) {
switch(keyitem) {
case "clear":
clearScreen();
break;
case "plusminus":
plusminusScreen();
break;
case "%":
percentageScreen();
break;
case "/":
case "*":
case "+":
case "-":
addOperator(keyitem);
break;
case "0":
case "1":
case "2":
case "3":
case "4":
case "5":
case "6":
case "7":
case "8":
case "9":
addNumber(keyitem);
break;
case ".":
addDecimal(keyitem);
break;
case "=":
solveEqual();
break;
}
update();
};
function clearScreen() {
mainMath = "0";
subMath = "0";
};
function plusminusScreen() {
mainMath = -1 * mainMath;
};
function addNumber(keyitem) {
/*if (keyitem == "."){
if(mainMath == "0") {
mainMath = "0" + keyitem;
return;
}
}*/
if (mainMath == "0"){
mainMath = keyitem;
return;
}
if (subMath == "0") {
subMath = "";
}
mainMath+=keyitem;
};
function addOperator(keyitem){
if(mainMath == "0"){
subMath += "0";
}
addNumber(keyitem);
subMath += mainMath;
mainMath = "0";
};
function addDecimal(keyitem){
if (keyitem == "."){
if(mainMath == "0") {
mainMath = "0" + keyitem;
subMath = "0";
return;
}
}
addNumber(keyitem);
};
function solveEqual() {
mainMath = eval(subMath+mainMath);
};
function update(){
$("#answer").html(mainMath);
$("#history").html(subMath);
};
});@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
h1, h2, h3, p {
font-family: 'Roboto', sans-serif;
}
html, body{
height:100%;
margin: 0;
background-color: #ffffff;
}
.wrapper {
width: 100%;
height: 100%;
position: relative;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
padding: 160px 0;
}
.calculatorbox {
width: 260px;
margin: 0 auto;
border: 1px solid #000000;
}
.calheader {
text-align: center;
}
.calwindow {
background: #000000;
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column; /* Safari */
flex-direction: column;
-webkit-justify-content: flex-end;
justify-content: flex-end;
-webkit-align-items: flex-end;
align-items: flex-end;
padding: 10px 0;
box-sizing: border-box;
}
.entry {
font-size: 4em;
display: block;
line-height: 1em;
}
.entryhistory {
font-size: 1em;
padding-right: 5px;
}
.entry p, .entryhistory p {
margin: 0;
color: #ffffff;
}
sup {
top: -0.5em;
}
sub {
bottom: -0em;
}
.row {
clear: both;
width: 100%;
display: flex;
}
button {
display: inline-block;
border: none;
padding: 0;
outline: none;
cursor: pointer;
}
.key {
width: 65px;
height: 60px;
font-size: 22px;
border-top: 1px solid rgba(0, 0, 0, 0.3);
border-right: 1px solid rgba(0, 0, 0, 0.3);
box-sizing: border-box;
}
.key.btnspan {
width: 130px;
}
.key.topcolor {
background: #d9d9d9;
}
.key.orange {
background: #ff8c00;
color: #ffffff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="calheader">
<h2>Simple Calculator</h2>
</div>
<div class="calculatorbox">
<div class="calwindow">
<!-- ENTRY BOX -->
<div class="entry">
<p id="answer">0</p>
</div>
<div class="entryhistory">
<p id="history">0</p>
</div>
</div>
<!-- BUTTONS -->
<div class="calbuttons">
<div class="row">
<button class="key topcolor" value="clear">C</button>
<button class="key topcolor" value="plusminus"><sup>+</sup>/<sub>−</sub></button>
<button class="key topcolor" value="%">%</button>
<button class="key orange" value="/">÷</button>
</div>
<div class="row">
<button class="key" value="7">7</button>
<button class="key" value="8">8</button>
<button class="key" value="9">9</button>
<button class="key orange" value="*">×</button>
</div>
<div class="row">
<button class="key" value="4">4</button>
<button class="key" value="5">5</button>
<button class="key" value="6">6</button>
<button class="key orange" value="-">−</button>
</div>
<div class="row">
<button class="key" value="1">1</button>
<button class="key" value="2">2</button>
<button class="key" value="3">3</button>
<button class="key orange" value="+">+</button>
</div>
<div class="row">
<button class="key btnspan" value="0">0</button>
<button class="key" value=".">.</button>
<button class="key orange" value="=">=</button>
</div>
</div>
</div>
</div>
電卓が数字で動作するはずの
は、私は、... –
@Jonaswあなたが言っていることを理解していないのですか？もちろん、電卓は数字で動作するはずですが、電卓の一部である小数点以下の桁数と負数を考慮する必要があります。したがって、コメントの意味をさらに説明する必要があります。 –
@Carcigenicate、私はupdate（）が問題だとは思わない。問題は、関数addNumber（keyitem）、関数addOperator（keyitem）、および関数addDecimal（keyitem）にあると思います。あなたはこの問題を解決できましたか？ –