Beginner JS calculator

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

Answer 1

の下でaddOne（）とaddTwo（）関数を置き換える消えてしまいますので、テキストボックスに既存の値を置き換えるあなただけ+=を使用する必要があります。 =は値をリセットしますが、+=は値を追加/連結します。 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>

Answer 2

あなたは、あなたの関数のいずれかを呼び出して、テキストフィールドの毎回の値をリセットしています。新しいテキストを毎回設定したくない場合は、古いテキストに新しいテキストを追加します。あなたがテキストを追加するたびため

displayText.value += one; 

：だからと

displayText.value = one; 

を交換してください。

Hereは動作中のフィドルです。

Answer 3

あなたは、それが コード

代わり =の

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