Я строю калькулятор, и пока он начинает работать, я немного застрял. Я вставил HTML и JS сюда.
Я пытался выяснить, что пошло не так, и я думаю, что это из-за функций, вызывающих друг друга, а не должным образом... "закрытие/завершение". Я пытался увидеть, что пошло не так с добавлением console.logs. Я сломаю это здесь:
Я listenFirst
"on" и listenFirst
функция listenFirst
. listenFirst
имеет eventListener
и ждет пользователя, чтобы нажать на номер (firstNumber
). Как только нажата waitforOperator
, запускается waitforOperator
(который теперь имеет firstNumber
в качестве атрибута. Теперь waitforOperator
ожидает щелчка по знаку плюса, и как только пользователь нажимает на знак плюс, listenSecond
. Теперь вот где все идет не так: как только я нажимаю второе число, waitforOperator
снова запускается, и теперь firstNumber
и secondNumber
совпадают.
Чтобы было ясно: я просто хочу решить эту проблему, прежде чем углубляться в другие операторы, поэтому, пожалуйста, не обращайте внимания на другие операторы, такие как минус и умножение.
Подталкивание в правильном направлении было бы неплохо! Заранее спасибо.
let displayBox = document.getElementById("displayBox");
let pressButton = document.querySelectorAll(".column");
let turnOn = document.getElementById("turnOn");
let minus = document.getElementById("minus");
let plus = document.getElementById("plus");
let firstNumber = Number();
let secondNumber = Number();
turnOn.addEventListener("click", function() {
displayBox.textContent = "CALCULATOR ON. GIVE FIRST NR.";
console.log("launching function listenFirst");
listenFirst();
});
let listenFirst = () => {
console.log("launched listenFirst");
for (var i = 0; i < pressButton.length; i++) {
pressButton[i].addEventListener("click", function() {
firstNumber = displayBox.textContent = Number(this.id);
waitForOperator(firstNumber);
});
}
};
let listenSecond = () => {
console.log("launched listenSecond");
console.log('first number is still ${firstNumber}')
console.log('waiting for you to press second number')
for (var i = 0; i < pressButton.length; i++) {
pressButton[i].addEventListener("click", function() {
secondNumber = displayBox.textContent = Number(this.id);
console.log('After click on second number, first number is ${firstNumber} and second number is ${secondNumber}')
});
}
console.log(
'Now first number is ${firstNumber} and second number is ${secondNumber}'
);
};
let waitForOperator = () => {
console.log("launched waitForOperator");
console.log('First number is ${firstNumber}');
console.log("Waiting for you to press plus");
plus.addEventListener("click", function() {
listenSecond(firstNumber);
});
};
let calculateSum = () => {
console.log('Second number is ${secondNumber}');
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello Bulma!</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"
/>
<script
defer
src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"
></script>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<section class="section">
<h1 class="title has-text-centered" id="titleText">Calculator.</h1>
<div class="container">
<div class="field">
<a class="button is-fullwidth is-static" id="displayBox"></a><a class="button is-success" id="turnOn">ON</a>
</div>
<div class="calculator">
<div class="columns">
<div class="column" id="7">7</div>
<div class="column" id="8">8</div>
<div class="column" id="9">9</div>
<div class="column" id="minus">-</div>
</div>
<div class="columns">
<div class="column" id="4">4</div>
<div class="column" id="5">5</div>
<div class="column" id="6">6</div>
<div id="plus">+</div>
</div>
<div class="columns">
<div class="column" id="1">1</div>
<div class="column" id="2">2</div>
<div class="column" id="3">3</div>
<div class="column" id="equals">=</div>
</div>
<div class="columns">
<div class="column" id="0">0</div>
<div class="column" id="dot">.</div>
</div>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
Вы никогда не удаляете прослушиватель событий, который вы добавили к listenFirst
кнопкам в listenFirst
. Поэтому, когда пользователь нажимает кнопки после waitForOperator
и код в listenFirst
и listenSecond
. listenFirst
call waitForOperator
снова.
JavaScript: удалить прослушиватель событий Посмотрите этот ответ, чтобы узнать, как удалить прослушиватели событий.