無法獲得加號/減號按鈕以正常工作javascript

Question

我希望對以下問題有任何幫助。當我在我的計算器中輸入我的字符串時，它顯示Nan，下一個整數變化-1 + 2到-1 + -2，它顯示Nan。我使用Math.abs（）將我的值更改爲負值或正值。

var infoBox = document.getElementById('screen'); 
 

 
function addscreen(x) { //x verteenwoordig die knopie wat gedruk word bv 1 en dan by vorige waarde gevoeg word van infoBox; 
 
    infoBox.value = infoBox.value + x; 
 
    if (x === 'C') { 
 
    infoBox.value = ''; 
 
    } 
 
} 
 

 
function changesign(x) { 
 
    changeNum(); 
 
} 
 

 
function changeNum(x) { 
 
    x = infoBox.value; 
 
    x = Math.sign(x); 
 
    if (x === 1) { 
 
    x = infoBox.value; 
 
    x = -Math.abs(x); 
 
    infoBox.value = x; 
 
    } else { 
 
    x = infoBox.value; 
 
    x = Math.abs(x); 
 
    infoBox.value = x; 
 
    } 
 
} 
 

 
function product(x) { 
 
    x = infoBox.value; 
 
    x = eval(x); 
 
    infoBox.value = x; 
 
} 
 

 
function mutiplyBy() { 
 
    x = infoBox.value; 
 
    x = eval(x * x); 
 
    infoBox.value = x; 
 
} 
 

 
function backspace() { 
 
    var character = infoBox.value; 
 
    var size = character.length - 1; 
 
    var newCharacter = character.substring(0, size); 
 
    infoBox.value = newCharacter; 
 
} 
 

 
function mutiplyBy2(x) { 
 
    x = infoBox.value; 
 
    x = x/100; 
 
    infoBox.value = x; 
 
} 
 

 
/*function mutiplyBy2 (x){ 
 
\t x = infoBox.value; 
 
\t x = x/100 * 10; 
 
\t infoBox.value = x.toFixed(1); 
 
}*/ 
 

 

 
function sqrt(x) { 
 
    x = infoBox.value; 
 
    x = Math.sqrt(x); 
 
    infoBox.value = x; 
 
}

#move { 
 
    margin-top: 150px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border: 5px solid grey; 
 
    border-radius: 10px; 
 
    background: grey; 
 
} 
 

 
body { 
 
    background-image: url("https://static.pexels.com/photos/27665/pexels-photo-27665.jpg"); 
 
    background-size: 1600px 780px; 
 
    background-repeat: no-repeat; 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
} 
 

 
#dimensions { 
 
    width: 165px; 
 
} 
 

 
.size2 { 
 
    width: 30px; 
 
    cursor: hand; 
 
    cursor: pointer; 
 
}

<h1>FreecodeCamp Calculator Project</h1> 
 
<table id="move"> 
 
    <form> 
 
    <tr> 
 
     <th> 
 
     <input type="text" id="screen" disabled> 
 
     </th> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input class="size2" type="button" value="MC"> 
 
     <input class="size2" type="button" value="MR"> 
 
     <input class="size2" type="button" value="MS"> 
 
     <input class="size2" type="button" value="M+"> 
 
     <input class="size2" type="button" value="M-"> 
 
     </td> 
 
    </tr> 
 
    <td> 
 
     <input class="size2" type="button" value="&#8592;" onclick="backspace()"> 
 
     <input class="size2" type="button" value="CE" onclick="backspace()"> 
 
     <input class="size2" type="button" value="C" onclick="addscreen('C')"> 
 
     <input class="size2" type="button" value="&plusmn;" onclick="changesign('&plusmn')"> 
 
     <input class="size2" type="button" value="&#8730;" onclick="sqrt()"> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input class="size2" type="button" value="7" onclick='addscreen("7")'> 
 
     <input class="size2" type="button" value="8" onclick="addscreen('8')"> 
 
     <input class="size2" type="button" value="9" onclick="addscreen('9')"> 
 
     <input class="size2" type="button" value="/" onclick="addscreen('/')"> 
 
     <input class="size2" type="button" value="%" onclick="mutiplyBy2()"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input class="size2" type="button" name="" value="4" onclick="addscreen('4')"> 
 
     <input class="size2" type="button" name="" value="5" onclick="addscreen('5')"> 
 
     <input class="size2" type="button" name="" value="6" onclick="addscreen('6')"> 
 
     <input class="size2" type="button" name="" value="*" onclick="addscreen('*')"> 
 
     <input class="size2" type="button" name="" value="x^2" onclick="mutiplyBy()"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input class="size2" type="button" name="" value="1" onclick="addscreen('1')"> 
 
     <input class="size2" type="button" name="" value="2" onclick="addscreen('2')"> 
 
     <input class="size2" type="button" name="" value="3" onclick="addscreen('3')"> 
 
     <input class="size2" type="button" name="" value="-" onclick="addscreen('-')"> 
 
     <input class="size2" type="button" name="" value="=" onclick="product()"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input class="size2" type="button" name="" value="0" onclick="addscreen('0')"> 
 
     <input class="size2" type="button" name="" value="." onclick="addscreen('.')"> 
 
     <input class="size2" type="button" name="" value="+" onclick="addscreen('+')"> 
 
     </td> 
 
    </tr> 
 
    </form> 
 
</table>

Answer 1

我認爲你有一個語義問題。你採用整個表達式，但在一個普通的計算器中，±表示改變最後一個數字的符號。我改變你這樣的changeNum功能：

function changeNum() { 
 
    let x = infoBox.value; 
 
    let regex = /^\d+$|(.*)([-+]\d+)$/; 
 
    let last = (x.match(regex)); 
 
    if (last !== null) { 
 
    let n = isNaN(last[2]) ? last[0] : last[2]; //1st part of the regex ? 
 
    let newVal = (eval(-eval(n))); // Sign inversion 
 
    if (newVal > 0) // Force to print the + behind the number 
 
     newVal = "+" + newVal; 
 
    infoBox.value = x.replace(regex, "$1" + newVal); 
 
    } 
 
}

正則表達式xplantation： 正則表達式的意思是把開頭表達的數字（如「1」），或採取與它的最後一個數字符號（如-1 + 2，它將採取+2）。

三元表達式允許知道我們是在哪種情況下。

祝您有美好的一天。

Answer 2

變化changeNum象下面這樣：

function changeNum(x) { 
 
    x = infoBox.value; 
 
    if(!isNaN(x)){ 
 
    x = Math.sign(x); 
 
    if (x === 1) { 
 
     x = infoBox.value; 
 
     x = -Math.abs(x); 
 
     infoBox.value = x; 
 
    } else { 
 
     x = infoBox.value; 
 
     x = Math.abs(x); 
 
     infoBox.value = x; 
 
    } 
 
    } 
 
}