Как ввести значение в поле с помощью кнопок? (html, js калькулятор)

Question

Итак, мы только начали изучать Vanila JS, у нас было упражнение, которое создает калькулятор с использованием html, css и js .. Я уже создал макет клакулятора (я оставлю css до конца), однако я испытываю затруднения при вводе числа, которое я хочу в поле, с помощью кнопок ... в основном это пока мой макет, но у меня есть некоторые вопросы о калькуляторе, который я хочу ..

Перед тем, как я покажу вам макет, вот как я хочу, чтобы калькулятор выглядел, посмотрев на поля: схема расположения полей Итак, как вы можете видеть, в поле 1 я хочу введите первое значение, теперь, когда мы ввели первое значение, я хочу показать математическое действие, которое я хочу сделать между двумя значениями, в поле 3 я хочу ввести второе значение, после того, как я ввел значение, я буду нажмите на кнопку «равно», последнее поле покажет мне результат.

Как я уже говорил, я уже создал макет для полей и кнопок, вот макет: ``

<div class="calculator">

    <input type="text" class="calculator-screen" value="1" disabled /> <!--value 1-->
    <input type="text" class="calculator-screen" value="math action" disabled /> <!--math action-->
    <input type="text" class="calculator-screen" value="2" disabled /> <!--value 2-->

    <button type="button" class="equal-sign" value="=" onclick="solve()">=</button>
    <input type="text" class="result" value="result" disabled />

    <div class="calculator-keys">

      <button type="button" class="operator" value="+" onclick="dis('+')">+</button>
      <button type="button" class="operator" value="-" onclick="dis('-')">-</button>
      <button type="button" class="operator" value="*" onclick="dis('*')">*</button>
      <button type="button" class="operator" value="/" onclick="dis('/')">/</button> <br>

      <button type="button" value="7" onclick="dis('7')">7</button>
      <button type="button" value="8" onclick="dis('8')">8</button>
      <button type="button" value="9" onclick="dis('8')">9</button><br>


      <button type="button" value="4" onclick="dis('4')">4</button>
      <button type="button" value="5" onclick="dis('5')">5</button>
      <button type="button" value="6" onclick="dis('6')">6</button><br>


      <button type="button" value="1" onclick="dis('1')">1</button>
      <button type="button" value="2" onclick="dis('2')">2</button>
      <button type="button" value="3" onclick="dis('3')">3</button><br>


      <button type="button" value="0" onclick="dis('0')">0</button>
      <button type="button" class="decimal" value="." onclick="dis('.')">.</button>
      <button type="button" class="all-clear" value="all-clear" onclick="clr()">AC</button>        
  </div>

d мой js код до сих пор:

function dis(val) 
     { 
         document.getElementById("result").value+=val 
     } 


     //function that clear the display 
 function clr() 
     { 
         document.getElementById("result").value = "" 
     } 

Итак, после того, как я сделал макет и кнопки, как мне сделать так, чтобы я мог вводить значения с помощью кнопок?

в дополнение к этому, как показать математическое действие (- * / +) между полями значений?

Извините за мой engli sh, я старался изо всех сил, чтобы объяснить .. Спасибо

Answer 1

Я решил эту проблему в прошлом так:

• Установите переменную для отслеживания с каким операндом число, с которым мы работаем, первым или второй операнд Давайте назовем эту переменную thisOperand. Установите эту переменную для операнда first, чтобы начать с.

• Когда число вводится в любое время, проверьте значение thisOperand. Если first добавить число (полученное из атрибута value) к первому полю операнда, если second ко второму полю операнда.

• Когда Оператор выбирается, если уже введен первый операнд (т. е. элемент отображения не пустой), установите для переменной thisOperand значение second, чтобы следующие числа вводились после оператора. В противном случае, если не введен первый операнд, ничего не делайте. Если второй операнд уже активен, это означает, что мы уже ввели оператор ранее - иначе второй операнд не был бы активен - поэтому просто обновите оператор с новым значением.

• При нажатии кнопки '=' покажите результат и снова установите thisOperand на first. Если отображается результат и нажимается новый номер, запустите функцию очистки и поместите номер в первое поле операнда (как это сделал бы физический калькулятор).

Все это проще, если Вы устанавливаете атрибуты id для ссылки на поля отображения (те, которые имеют value атрибуты '1', 'math action' и '2' в вашем примере выше).