javascript - 建筑计算器 - 没有让它工作
问题描述
我正在构建一个计算器,当它开始工作时,我有点卡住了。我已将 HTML 和 JS 粘贴到此处。
我一直试图弄清楚出了什么问题,我认为这是因为函数相互调用而不是正确地......“关闭/结束”。我一直在尝试查看添加 console.logs 出了什么问题。我将在这里分解它:
我按“开”,功能listenFirst
开始运行。
listenFirst
有一个eventListener
并等待用户点击一个数字 ( firstNumber
)。一旦点击一个数字,waitforOperator
就会运行(它现在具有firstNumber
as 属性。现在,
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
。因此,当用户waitForOperator
在代码输入listenFirst
并listenSecond
运行后按下按钮时。listenFirst
再打电话waitForOperator
。
JavaScript:删除事件侦听器查看此答案以了解如何删除事件侦听器。
推荐阅读
- php - 关于恶意代码 aeR4Choc 注入的安全漏洞的问题
- ios - App rejected for for non-public API usage after including react-native-purchases
- python - Creating Loops in Pandas
- google-cloud-platform - How can i show a from name instead of email address using sendgrid in GCP composer
- wpf-controls - How can I populate the datagrid cobmo box column in WPF?
- sql - sql查询未返回正确的MTD累积和
- flutter - Stacking Multiple Rows of Strings in Csv in Flutter
- python - Pygame and PyOpenGL: No shapes appear on screen
- javascript - JavaScript 中的 Java/Python 交叉编译
- vba - 如何将动态加载的无界子表单链接到主表单?