0
私はFreeCodeCampチャレンジのための電卓を作っています。私のコードは、いくつかの問題を除いてほとんど完了しています。問題の1つは繰り返し演算子です。例えば、誰かが「5+」を押してから心を変えた場合、代わりに「 - 」を押すと、結果は「5」になります。ここでCalculatorで演算子を1つ押してから別の演算子を押すと修正する方法はありますか？
は私Codepenから私の元のコードです：
$(document).ready(function() {
var mainMath = "0";
var subMath = "0";
var finalset = "";
var subMatharray = [];
var equaltrue = false;
update();
$("button").click(function(){
calculate($(this).attr("value"));
});
function calculate(keyitem) {
console.log("buttonpress: " + keyitem);
switch(keyitem) {
case "clear":
clearScreen();
break;
case "%":
percentageScreen();
break;
case "/":
case "*":
case "+":
case "-":
addOperator(keyitem);
break;
case "plusminus":
plusminusScreen();
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(keyitem);
break;
}
update();
};
function clearScreen() {
mainMath = "0";
subMath = "0";
subMatharray = [];
if(mainMath.length > 0){
$(".entry").css("font-size", "4em");
}
console.log("clearMain: " + mainMath);
console.log("clearSub: " + subMath);
};
function plusminusScreen() {
mainMath = -1 * mainMath;
finalset = mainMath;
console.log("plusminusMain: " + mainMath);
console.log("plusminusFinal: " + finalset);
};
function addNumber(keyitem) {
if (mainMath == "0"){
mainMath = keyitem/*mainMath.replace("0", keyitem);*/
finalset = mainMath;
return;
console.log("addedMainZero: " + mainMath);
console.log("addedFinalZero: " + finalset);
}
if (equaltrue == true){
mainMath = keyitem;
subMath = "0";
subMatharray = [];
console.log("addNumberEqualmain: " + mainMath);
}
mainMath+=keyitem;
finalset = mainMath;
console.log("addedMain: " + mainMath);
console.log("addedFinalset: " + finalset);
console.log("addedarray: " + subMatharray);
if(mainMath.length > 8){
$(".entry").css("font-size", "1.5em");
}
};
function addOperator(keyitem){
if (equaltrue == true){
subMatharray = [];
console.log("addOpEqualarray: " + subMatharray);
}
subMatharray.push(mainMath,keyitem);
subMath = subMatharray.join("");
mainMath = "0";
console.log("addOpSub: " + subMath);
console.log("addOpMain: " + mainMath);
console.log("addOpMainarray: " + subMatharray);
console.log("equaltrueTest: " + equaltrue);
};
function addDecimal(keyitem){
if (mainMath.indexOf(keyitem) === -1){
if(mainMath == "0") {
mainMath = "0" + keyitem;
return;
}
} else {
return;
}
addNumber(keyitem);
};
function solveEqual(keyitem) {
mainMath = eval(subMath+mainMath);
console.log("solveEqualresult: " + mainMath);
subMatharray.push(finalset);
subMath = subMatharray.join("");
console.log("solveEqualhistory: " + subMath);
console.log("solveEqualarray: " + subMatharray);
var finalresult = mainMath.toString();
if(finalresult.length > 8){
$(".entry").css("font-size", "1.5em");
}
equaltrue = true;
};
function update(){
$("#answer").html(mainMath);
$("#history").html(subMath);
};
});
/*Problems
2. I need to work on percentage button soon...
3. fix the problem if someone click an operator more than one.
*/@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: 300px;
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;
letter-spacing: 2px;
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: 75px;
height: 70px;
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: 150px;
}
.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"></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>私は、コードを編集しようとすることを試みたが、それは非常にうまく機能していません。ここでは、この地域の私の試みはfunction addOperator()です。
function addOperator(keyitem){
var opkeyitem = "";
oppArray.push(keyitem);
console.log("addoppArray: " + oppArray);
if (oppArray.length > 1){
oppArray.shift();
opkeyitem = oppArray.toString();
subMatharray[1] = opkeyitem;
subMath = subMatharray.join("");
oppArray = [];
console.log("addoppArrayShift: " + oppArray);
console.log("addoppSubShift: " + subMatharray);
} else if(oppArray.length == 1) {
opkeyitem = oppArray.toString();
if (equaltrue == true){
subMatharray = [];
console.log("addOpEqualarray: " + subMatharray);
}
subMatharray.push(mainMath,opkeyitem);
subMath = subMatharray.join("");
mainMath = "0";
oppArray = [];
}
};
私のアイデアは、配列に格納された演算子を格納することでした。 2つ以上の演算子の場合、配列は最初の要素をノックオフして最後の要素を使用し、それを履歴領域に追加/置換する必要があります。
この問題を解決する方法を教えてください。
問題はあなたの 'addOperator'関数のロジックです。 '' 0 ''を挿入します。また、すべての変数はグローバルであり、悪いです。 –
はい、それは私の元のコードです。私の試みをチェックしていないのですか？ –
最後の演算子を永続的に保存したい場合addOperator関数 'if（！this.oppArray）this.oppArray = [];を変更したい場合があります。 this.oppArray.push（keyitem）; 'oppArrayを' this.oppArray'呼び出しで置き換えます。 – JustMe