如何将计算器的显示文本内容从'0'更改为另一个数字

我想改变calcDisplay的textContent从'0'到一个数字，当我点击其中一个按钮。当我点击按钮时，什么都没有。我甚至没有得到任何错误，我不知道该怎么做。我在考虑做innerHTML。也许我应该把if放在一个函数中然后在事件中调用它?

const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
const multiply = (a, b) => a * b;
const divide = (a, b) => a / b;
const previousOperandTextElement = document.querySelector('.previousOperand')
const currentOperandTextElement = document.querySelector('.currentOperand')
const calcDisplay = document.querySelector('.output').textContent = '0'

// Click events for every button on the calculator //
const buttonEquals = document.querySelector('.keyButtonEquals');
buttonEquals.addEventListener('click', () => {
const action = buttonEquals.dataset.action;
console.log(action)
});
const buttonClear = document.querySelector('.keyButtonClear');
buttonClear.addEventListener('click', () => {
const action = buttonClear.dataset.action;
console.log(action)
});
const deleteButton = document.querySelector('.keyButtonDelete')
deleteButton.addEventListener('click', () => {
const action = deleteButton.dataset.action;

});
const buttons = document.querySelectorAll('.keyButton').forEach(button => {
button.addEventListener('click', () => {
const action = button.dataset.action;
const buttonContent = button.textContent;
const displayedNum = calcDisplay.textContent;
if (action) {
if (displayedNum === "0") {
calcDisplay.textContent = buttonContent;
}
}
});
});

const buttonOperation = document.querySelectorAll('.keyButtonOperation').forEach(button => {
button.addEventListener('click', () => {
const action = button.dataset.action;
console.log(action)
});
});

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<link rel="stylesheet" href="./styles/style.css">
<body>
<div class="calcContainer">

<div class="buttons">
<div class="output">
<div class="previousOperand"></div>
<div class="currentOperand"></div>
</div>
<button class="keyButton" data-action = 7>7</button>
<button class="keyButton" data-action = 8>8</button>
<button class="keyButton" data-action = 9>9</button>
<button class="keyButtonOperation" data-action = "SignChange" >+/-</button>
<button class="keyButtonDelete" data-action = "DEL">DEL</button>
<button class="keyButton" data-action = 4>4</button>
<button class="keyButton" data-action = 5>5</button>
<button class="keyButton" data-action = 6>6</button>
<button class="keyButtonOperation" data-action="multiply">X</button>
<button class="keyButtonOperation" data-action="divide">%</button>
<button class="keyButton" data-action = 1>1</button>
<button class="keyButton" data-action = 2>2</button>
<button class="keyButton" data-action = 3>3</button>
<button class="keyButtonOperation" data-action = "substract">-</button>
<button class="keyButtonEquals" data-action = "=">=</button>
<button class="keyButtonClear" data-action = "clear">C</button>
<button class="keyButton" data-action = 0>0</button>
<button class="keyButton" data-action = .>.</button>
<button class="keyButtonOperation" data-action = "add">+</button>
</div>
</div>
<script src="./scripts/script.js"></script>
</body>
</head>
</html>

这与您设置calcDisplay(第8行)的行有关。当您分配给变量时，将输出的文本输出设置为'0'而不是查询选择器的结果。如果你把它改成两行就可以了。

另外，你的head元素在HTML中也包裹着body

。改变:

const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
const multiply = (a, b) => a * b;
const divide = (a, b) => a / b;
const previousOperandTextElement = document.querySelector('.previousOperand')
const currentOperandTextElement = document.querySelector('.currentOperand')
const calcDisplay = document.querySelector('.output');
calcDisplay.textContent = '0'

// Click events for every button on the calculator //
const buttonEquals = document.querySelector('.keyButtonEquals');
buttonEquals.addEventListener('click', () => {
const action = buttonEquals.dataset.action;
console.log(action)
});
const buttonClear = document.querySelector('.keyButtonClear');
buttonClear.addEventListener('click', () => {
const action = buttonClear.dataset.action;
console.log(action)
});
const deleteButton = document.querySelector('.keyButtonDelete')
deleteButton.addEventListener('click', () => {
const action = deleteButton.dataset.action;
});
const buttons = document.querySelectorAll('.keyButton').forEach(button => {
button.addEventListener('click', () => {
const action = button.dataset.action;
const buttonContent = button.textContent;
const displayedNum = calcDisplay.textContent;
if (action) {
if (displayedNum === "0") {
calcDisplay.textContent = buttonContent;
}
}
});
});

const buttonOperation = document.querySelectorAll('.keyButtonOperation').forEach(button => {
button.addEventListener('click', () => {
const action = button.dataset.action;
console.log(action)
});
});

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<link rel="stylesheet" href="./styles/style.css">
</head>
<body>
<div class="calcContainer">
<div class="buttons">
<div class="output">
<div class="previousOperand"></div>
<div class="currentOperand"></div>
</div>
<button class="keyButton" data-action=7>7</button>
<button class="keyButton" data-action=8>8</button>
<button class="keyButton" data-action=9>9</button>
<button class="keyButtonOperation" data-action="SignChange">+/-</button>
<button class="keyButtonDelete" data-action="DEL">DEL</button>
<button class="keyButton" data-action=4>4</button>
<button class="keyButton" data-action=5>5</button>
<button class="keyButton" data-action=6>6</button>
<button class="keyButtonOperation" data-action="multiply">X</button>
<button class="keyButtonOperation" data-action="divide">%</button>
<button class="keyButton" data-action=1>1</button>
<button class="keyButton" data-action=2>2</button>
<button class="keyButton" data-action=3>3</button>
<button class="keyButtonOperation" data-action="substract">-</button>
<button class="keyButtonEquals" data-action="=">=</button>
<button class="keyButtonClear" data-action="clear">C</button>
<button class="keyButton" data-action=0>0</button>
<button class="keyButton" data-action=.>.</button>
<button class="keyButtonOperation" data-action="add">+</button>
</div>
</div>
<script src="./scripts/script.js"></script>
</body>
</html>

我不得不向下移动。output的textContent，因为你不能用这个'值'做任何事情，如果它在那里。这就是我使用calcDisplay的原因。textContent = 0;我编辑了按钮事件，它正在工作。感谢TOP discord的帮助。

const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
const multiply = (a, b) => a * b;
const divide = (a, b) => a / b;
const previousOperandTextElement = document.querySelector('.previousOperand')
const currentOperandTextElement = document.querySelector('.currentOperand')
const calcDisplay = document.querySelector('.output')
calcDisplay.textContent = 0;

// Click events for every button on the calculator //
const buttonEquals = document.querySelector('.keyButtonEquals');
buttonEquals.addEventListener('click', () => {
const action = buttonEquals.dataset.action;
console.log(action)
});
const buttonClear = document.querySelector('.keyButtonClear');
buttonClear.addEventListener('click', () => {
const action = buttonClear.dataset.action;
console.log(action)
});
const deleteButton = document.querySelector('.keyButtonDelete')
deleteButton.addEventListener('click', () => {
const action = deleteButton.dataset.action;
});
const buttons = document.querySelectorAll('.keyButton').forEach(button => {
button.addEventListener('click', () => {
const action = button.dataset.action;
calcDisplay.textContent = action;

});
console.log(calcDisplay);
});

const buttonOperation = document.querySelectorAll('.keyButtonOperation').forEach(button => {
button.addEventListener('click', () => {
const action = button.dataset.action;
console.log(action)
});
});

相关内容

最新更新

热门标签：