Question

我是JS的新世界，我正在尝试构建一个基本的计算器。一切都工作得很好，但我有问题在计算器的结果屏幕上显示不同的元素。

当我点击1然后2时，1将消失，但我希望它留在我的计算中。

请帮忙!!

＆＃13;

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;
}

＆＃13;

 <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>

＆＃13;

Answer 1

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

displayText.value = one;

使用：

displayText.value += one;

每次要附加文字。

Here是一个工作小提琴。

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>

初学JS计算器

3 个答案: