Функции Backspace и Clear не работают в калькуляторе JavaScript. - PullRequest
Новая
       21

Функции Backspace и Clear не работают в калькуляторе JavaScript.

0 голосов
/ 28 июня 2019

Таким образом, название рассказывает большую часть истории. Я делаю чистый калькулятор HTML / CSS / JS, и HTML / CSS прошел хорошо, но я не могу заставить работать первые две функции. Я уже сделал поиск в Google, но просто сравнивая код, мой код выглядит так, как будто он должен работать, поэтому я в тупике. В любом случае, вот любой потенциально релевантный код. 

var oneBtn = document.getElementById('calc-one');
var twoBtn = document.getElementById('calc-two');
var threeBtn = document.getElementById('calc-three');
var fourBtn = document.getElementById('calc-four');
var fiveBtn = document.getElementById('calc-five');
var sixBtn = document.getElementById('calc-six');
var sevenBtn = document.getElementById('calc-seven');
var eightBtn = document.getElementById('calc-eight');
var nineBtn = document.getElementById('calc-nine');
var zeroBtn = document.getElementById('calc-zero');

var decimalBtn = document.getElementById('calc-decimal');
var clearBtn = document.getElementById('calc-clear');
var backspaceBtn = document.getElementById('calc-backspace');
var displayValElement = document.getElementById('calc-display-val');

var displayVal = '0';
var pendingVal;
var evalStringArray = [];

var calcNumBtns = document.getElementsByClassName('calc-btn-num');
var calcOperatorBtns = document.getElementsByClassName('calc-btn-operator');

var updateDisplayVal = (clickObj) => {
  var btnText = clickObj.target.innerText;

  if (displayVal === '0')
    displayVal = '';

  displayVal += btnText;
  displayValElement.innerText = displayVal;
}

for (let i = 0; i < calcNumBtns.length; i++) {
  calcNumBtns[i].addEventListener('click', updateDisplayVal, false);
}
//for (let i = 0; i < calcOperatorBtns.length; i++) {
//    calcOperatorBtns[i].addEventListener('click', performOperation, false)
//}

clearBtn.onClick = () => {
  displayVal = '0';
  pendingVal = undefined;
  evalStringArray = [];
  displayValElement.innerHTML = displayVal;
}

backspaceBtn.onClick = () => {
  let lengthOfDisplayVal = displayVal.length;
  displayVal = displayVal.slice(0, lengthOfDisplayVal - 1);

  if (displayVal === '')
    displayVal = '0';
  displayValElement.innerText = displayVal;
}
@import url('https://fonts.googleapis.com/css?family=Roboto:100&display=swap');
body {
  font-family: 'Roboto', sans-serif;
}

.calc-btn {
  background-color: silver;
  color: black;
  width: 25px;
  height: 45px;
  border: 1px solid gray;
  text-align: center;
  cursor: pointer;
  font-size: 32px;
  font-weight: 100;
  padding-top: 3px;
}

.calc-btn:hover {
  background-color: orange;
}

.row {
  display: table;
  table-layout: fixed;
  width: 200px;
}

.column {
  display: table-cell;
}

#calc-zero {
  width: 52.66666667px;
  border-radius: 0 0 0 7px;
}

#calc-clear {
  width: 52.66666667px;
}

#calc-display-val {
  height: 80x;
  color: white;
  text-align: right;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  border-top: 1px solid gray;
  font-size: 48px;
  background-color: #383838;
  overflow: hidden;
  white-space: nowrap;
  padding: 12px;
  border-radius: 7px 7px 0 0;
}

.calc-btn-operator {
  background-color: orange;
  color: white;
}

h1 {
  text-align: center;
  margin-top: 50px;
}

#calc-equals {
  border-radius: 0 0 7px 0;
}

#calc-parent {
  margin-left: calc(50% - 100px);
}
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <h1>Pure HTML/CSS/JS Calculator</h1>

  <div id="calc-parent">
    <div class="row">
      <div class="column" id="calc-display-val">0</div>
    </div>
    <div class="row">
      <div class="calc-btn column" id="calc-clear">AC</div>
      <div class="calc-btn column" id="calc-backspace">&#8676;</div>
      <div class="calc-btn calc-btn-operator column" id="calc-divide">&#247;</div>
    </div>
    <div class="row">
      <div class="calc-btn calc-btn-num column" id="calc-seven">7</div>
      <div class="calc-btn calc-btn-num column" id="calc-eight">8</div>
      <div class="calc-btn calc-btn-num column" id="calc-nine">9</div>
      <div class="calc-btn calc-btn-operator column" id="calc-multiply">x</div>
    </div>
    <div class="row">
      <div class="calc-btn calc-btn-num column" id="calc-four">4</div>
      <div class="calc-btn calc-btn-num column" id="calc-five">5</div>
      <div class="calc-btn calc-btn-num column" id="calc-six">6</div>
      <div class="calc-btn calc-btn-operator column" id="calc-minus">-</div>
    </div>
    <div class="row">
      <div class="calc-btn calc-btn-num column" id="calc-one">1</div>
      <div class="calc-btn calc-btn-num column" id="calc-two">2</div>
      <div class="calc-btn calc-btn-num column" id="calc-three">3</div>
      <div class="calc-btn calc-btn-operator column" id="calc-plus">+</div>
    </div>
    <div class="row">
      <div class="calc-btn calc-btn-num column" id="calc-zero">0</div>
      <div class="calc-btn column" id="calc-decimal">.</div>
      <div class="calc-btn calc-btn-operator column" id="calc-equals">=</div>
    </div>
  </div>
</body>

Ответы [ 3 ]

1 голос
/ 28 июня 2019

Использование c lick вместо C lick.т.е. строчная буква c в onclick решит вашу проблему.

0 голосов
/ 28 июня 2019

Изменение backspaceBtn.onClick на backspaceBtn.addEventListener("click", function () { должно помочь. Я приготовил для вас скрипку здесь .

0 голосов
/ 28 июня 2019

Сначала при использовании ES6 вы должны добавить «Use Strict» в начале вашего скрипта.

Во-вторых, убедитесь, что сценарий запущен, когда DOM готов, в противном случае getElementById будет неопределенным, поскольку элемент еще не визуализирован.

В-третьих, у вас есть опечатка: попробуйте btnBackspace.onclick, который работал на моем тесте. (С помощью Firefox)

В-четвертых, может быть только здесь, но вы забыли HTML-теги.

...