简体   繁体   English

初学者JS计算器

[英]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. 每次要附加文本。

Here is a working fiddle. 是一个工作的小提琴。

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.

 
粤ICP备18138465号  © 2020-2025 STACKOOM.COM