0
私はFreeCodeCampの電卓をJavascriptでビルドしています。私はコードの一部に問題があります。 " - "、 "+"、 "x"などの演算子を追加すると、ヒストリセクションの数字が繰り返し表示されます。たとえば、「5」を入力すると、履歴領域に「5」が表示されます。それから、「+」を入力し、履歴に「5 + 5 +」と表示されます。電卓のオペレータJavaScriptが正しく動作していない
さらに、計算機をMacコンピュータの電卓と同じように動作させたいと考えました。言い換えれば、「5」を入力して「+」を入力すると、「5」が表示エリアに残り、次の数字が押されるまで「5+」が履歴エリアに表示されます。次に、履歴に「5 + 6」と表示されている間、次の番号が表示されます。どちらの問題を解決するには？ https://codepen.io/kikibres/pen/MEQvqv
あなたがここにもそれを見ることができます：
$(document).ready(function() {
var mainMath = "0";
var subMath = "0";
update();
var period = /\./;
$("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":
case ".":
addNumber(keyitem);
break;
case "=":
solveEqual();
break;
}
update();
};
function clearScreen() {
mainMath = "0";
subMath = "0";
};
function plusminusScreen() {
mainMath = -1 * mainMath;
subMath = -1 * subMath;
};
function addNumber(keyitem) {
if (keyitem == "."){
if(mainMath == 0 && subMath == 0) {
mainMath = "0" + keyitem;
subMath = "0" + keyitem;
return;
}
}
if (mainMath == "0" && subMath == "0"){
mainMath=keyitem;
subMath=keyitem;
return;
}
mainMath+=keyitem;
subMath+=keyitem;
};
function addOperator(keyitem){
addNumber(keyitem);
subMath += mainMath;
mainMath = keyitem;
};
function update(){
document.getElementById("answer").innerHTML = mainMath;
document.getElementById("history").innerHTML = 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"></p>
</div>
<div class="entryhistory">
<p id="history"></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>を私はとの問題を抱えている部分がこれです：
ここは私のcodepenリンクです
function addOperator(keyitem){
addNumber(keyitem);
subMath += mainMath;
mainMath = keyitem;
};
* *****************************更新******************** ************** これまでのところ、私は履歴領域の問題を解決することができました。しかし、私は表示の問題を解決することができません。問題は今、 "7"のような数字をクリックし、 "+"のような演算子をクリックするたびに表示され、数字が0に戻されます。第二の問題については
function addOperator(keyitem){
if(mainMath == "0"){
/*subMath === "0";*/
return;
}
/*addNumber(keyitem);*/
subMath += keyitem;
mainMath = "0";
};
私の質問の下で私の更新情報を参照してください。私は履歴領域を修正しましたが、私はまだ表示領域に問題があります。 –
@KristinaBressler、私は仕事のために私の答えの別の方法の終わりに加わりました。面白いかもしれません。どうぞご覧ください。 –