初学者JS计算器

Question

我是JS领域的新手，我正在尝试构建一个基本的计算器。 一切都工作了这么长时间，但是我在计算器的结果屏幕上显示不同的元素时遇到问题。

当我单击1然后2时，1将消失，但我希望它保留以进行计算。

请帮忙！！

 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> 

Answer 1

每次调用函数之一时，都要重置文本字段的值。 您不想每次都设置一个新文本，而是希望将新文本附加到旧文本上。 所以更换

displayText.value = one;

与：

displayText.value += one;

每次要附加文本。

这是一个工作的小提琴。

Answer 2

您要替换文本框中的现有值，因此它将消失，并使用以下代码替换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;
            }

Answer 3

代替= ，您只需要使用+= 。 =将重置值，而+=将附加/连接值。 您可以使用eval()来获取输入表达式的总和（在这种情况下）。

以下是为您更新的代码段：

 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>