Zrobiłem prosty kalkulator z czystym javascript. Wyświetlacz funkcji (Val) {Document.getElementByid ("Wynik"). Wartość + = Val; } Funkcja Rozwiąż () {Let X = Document.GetElementByid ("Ressaged")

-1
broNalbandyan 22 marzec 2021, 15:11

1 odpowiedź

Najlepsza odpowiedź

Możesz zbudować listę operatorów i porównać go z wartością wejściową i wynikiem bieżącym.

Uwaga: Gorąco polecam pozbyć się funkcji Evalu z powodu bezpieczeństwa (i wydajności) problemy z funkcją Eval.

Zalecam również użycie obsługi imprez javascript zamiast podręczników zdarzeń inline.

function display(val) {
  //Create a list of all operators of the calculator
  let operators = [...document.querySelectorAll('.operator')].map(el => el.textContent);
  
  //Get the current value
  let resultElement = document.querySelector('#result');
  let currentResult = resultElement.value;
  
  //When the input is an operator and the last character of the result is an operator then overwrite it, otherwise append it.
  if(operators.includes(val) && operators.includes(currentResult.charAt(currentResult.length - 1))) {
    resultElement.value = currentResult.substring(0, currentResult.length - 1) + val;
  }
  else {
    resultElement.value += val;
  }
}

function solve() {
  let x = document.getElementById("result").value
  let y = eval(x)
  document.getElementById("result").value = y
}

function clr() {
  document.getElementById("result").value = ""
}
<div class="app-wrapper">
  <div class="calc-wrapper">
    <div class="calc-display">
      <input type="text" id="result">
    </div>
    <div class="button-cont">
      <div class="row row-1">
        <div class="button ac" onclick="clr()">AC</div>
        <div onclick="display('/')" class="button operator">/</div>
      </div>
      <div class="row row-2">
        <div onclick="display('7')" class="button digit">7</div>
        <div onclick="display('8')" class="button digit">8</div>
        <div onclick="display('9')" class="button digit">9</div>
        <div onclick="display('*')" class="button operator">*</div>
      </div>
      <div class="row row-3">
        <div onclick="display('4')" class="button digit">4</div>
        <div onclick="display('5')" class="button digit">5</div>
        <div onclick="display('6')" class="button digit">6</div>
        <div onclick="display('-')" class="button operator">-</div>
      </div>
      <div class="row row-4">
        <div onclick="display('1')" class="button digit">1</div>
        <div onclick="display('2')" class="button digit">2</div>
        <div onclick="display('3')" class="button digit">3</div>
        <div onclick="display('+')" class="button operator">+</div>
      </div>
      <div class="row row-5">
        <div onclick="display('0')" class="button digit zero">0</div>
        <div onclick="display('.')" class="button digit">.</div>
        <div onclick="solve()" class="button operator">=</div>
      </div>
    </div>
  </div>
</div>
0
Mark Baijens 22 marzec 2021, 14:17