[英]Beginner JS calculator
I am new into the world of JS, and I'm trying to build a basic calculator. 我是JS领域的新手,我正在尝试构建一个基本的计算器。 Everything work fine so long but I have problem displaying different elements on the result screen of the calculator.
一切都工作了这么长时间,但是我在计算器的结果屏幕上显示不同的元素时遇到问题。
When I click 1 then 2, 1 will disappear but I want it to stay for my calculation. 当我单击1然后2时,1将消失,但我希望它保留以进行计算。
Please help!! 请帮忙!!
var displayText = document.getElementById('displayText'); var output = document.getElementById('output'); function add(){ var two, plus, result; result = displayText.value; output.innerHTML = result; } function addOne() { var one = document.getElementById('one').value = 1; displayText.value = one; } function addTwo() { var two = document.getElementById('two').value = 2; displayText.value = two; } function addPlus() { var plus = document.getElementById('plus').value = "+"; displayText.value = plus; }
<div> <div class="display"> <input type="text" id="displayText" name="" value=""> <p>The result of your calculation is: <span id="output"></span></p> </div> <div class="btn_wrap"> <button id="one" onclick="addOne()">1</button> <button id="two" onclick="addTwo()">2</button> <button id="plus" onclick="addPlus()">+</button> <button id="" onclick="add()">Add</button> </div> </div>
You're resetting the value of the text field everytime you call one of your functions. 每次调用函数之一时,都要重置文本字段的值。 You don't want to set a new text each time, you want to append the new text to the old text.
您不想每次都设置一个新文本,而是希望将新文本附加到旧文本上。 So replace
所以更换
displayText.value = one;
with: 与:
displayText.value += one;
for each time you want to append text. 每次要附加文本。
you are replacing existing value in textbox so, it will disappear replace the addOne() and addTwo() functions with below code 您要替换文本框中的现有值,因此它将消失,并使用以下代码替换addOne()和addTwo()函数
function addOne() {
var one = document.getElementById('one').value = 1;
displayText.value = displayText.value + one;
}
function addTwo() {
var two = document.getElementById('two').value = 2;
displayText.value =displayText.value + two;
}
Instead of =
, you just need to use +=
. 代替
=
,您只需要使用+=
。 =
will reset the value whereas +=
will append/concatenate the values. =
将重置值,而+=
将附加/连接值。 And you can use eval()
to get the sum (in this case) of entered expression. 您可以使用
eval()
来获取输入表达式的总和(在这种情况下)。
Below is the updated snippet for you: 以下是为您更新的代码段:
var displayText = document.getElementById('displayText'); var output = document.getElementById('output'); function add() { var two, plus, result; result = displayText.value; output.innerHTML = eval(result); } function addOne() { var one = document.getElementById('one').innerText; displayText.value += one; } function addTwo() { var two = document.getElementById('two').innerText ; displayText.value += two; } function addPlus() { var plus = document.getElementById('plus').innerText ; displayText.value += plus; }
<div> <div class="display"> <input type="text" id="displayText" name="" value=""> <p>The result of your calculation is: <span id="output"></span></p> </div> <div class="btn_wrap"> <button id="one" onclick="addOne()">1</button> <button id="two" onclick="addTwo()">2</button> <button id="plus" onclick="addPlus()">+</button> <button id="" onclick="add()">Add</button> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.