[英]how to make calculator using javascript using on text box for input value and perform add and subtract using button
如下所示，我想執行加減運算，但程序沒有給出計算輸出。 運算符 1 和運算符 2 有輸入框。我創建了兩個函數 add 和 sub。 並使用document.getElementById我傳遞了 a 和 b 的值並想要計算，但該函數沒有給出輸出。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> Operator1:<input type="text" id="a"> <br><br> Operator2:<input type="text" id="b"> <br><br> <input type="button" value="Add" id="add" onclick="addd()"> <input type="button" value="sub" id="sub" onclick="subb()"> <br><br> Result: <input type="text" id="res"> <script> function addd(){ var ra= document.getElementById('a').value; var rb=document.getElementById('b').value; var rab=ra+rb; Document.getElementById('res').value==rab; } function subb(){ var ra= document.getElementById('a').value; var rb=document.getElementById('b').value; var rab=ra-rb; document.getElementById('res').value==rab; } </script> </body> </html>您要確保使用的是賦值運算符，而不是比較運算符。
嘗試document.getElementById('res').value = rab; 反而。
我將提供一個您希望從中學習的示例，但我真的建議您在繼續編程之前先學習基礎知識。
<!DOCTYPE html>
<html>
<head>
<style>input[type=number], button { display:inline-block; margin-bottom: 4px; }</style>
</head>
<body>
<input type="number" id="input-a">
<input type="number" id="input-b"><br>
<button type="button" id="add">Add</button>
<button type="button" id="subtract">Subtract</button><br>
<input type="number" id="result" disabled>
<script>
const resultElement = document.querySelector("#result");
const inputAElement = document.querySelector("#input-a");
const inputBElement = document.querySelector("#input-b");
document.querySelector("#add").addEventListener("click", event => {
resultElement.value = +inputAElement.value + +inputBElement.value;
});
document.querySelector("#subtract").addEventListener("click", event => {
resultElement.value = +inputAElement.value - +inputBElement.value;
});
</script>
</body>
</html>
這里唯一不能自我解釋的是實際計算。 注意我是如何在每個值+inputAElement.value的開頭加上一個 + 的？ 那就是將值轉換為一個數字進行計算。 否則，在某些情況下，該值可以被視為文本值並只是混合在一起（例如5 + 1 = 51 ）。
使用 CSS 樣式更改外觀，如style標簽所示。 濫用 不會讓你成為任何朋友。
<!DOCTYPE html> <html> <head> <style>input[type=number], button { display:inline-block; margin-bottom: 4px; }</style> </head> <body> <input type="number" id="input-a"> <input type="number" id="input-b"><br> <button type="button" id="add">Add</button> <button type="button" id="subtract">Subtract</button><br> <input type="number" id="result" disabled> <script> const resultElement = document.querySelector("#result"); const inputAElement = document.querySelector("#input-a"); const inputBElement = document.querySelector("#input-b"); document.querySelector("#add").addEventListener("click", event => { resultElement.value = +inputAElement.value + +inputBElement.value; }); document.querySelector("#subtract").addEventListener("click", event => { resultElement.value = +inputAElement.value - +inputBElement.value; }); </script> </body> </html>
如何使用 JavaScript 為我的計算器項目創建一個可以添加文本的框？
[英]How to create a box where I can add text using JavaScript for my calculator project?
如何使用javascript通過按鈕向計數器添加或減去數字？
[英]How can I add or subtract numbers to a counter with a button using javascript?
如何使用Javascript減去兩個文本框值並在另一個文本框中顯示
[英]How to subtract two text box values and display in another text box using Javascript
如何使用javascript將文本框的值傳遞給禁用的文本框
[英]How to pass the value of the text box to the disabled text box using javascript
如何使用javascript通過另一個文本框的輸入值更改兩個文本框的顯示值？
[英]How to change the display value of two text boxes through the input value of another text box using javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.