Javascript

Question

我正在使用 HTML、CSS 和 Javascript 作为一个项目构建一个计算器。我几乎设置了 HTML 和 CSS - 我在编码 javascript 时遇到问题，以便我可以与 HTML 元素交互。我将事件侦听器添加到我的数字按钮 - 单击时我希望它们更新显示屏上的文本。经过一段时间的研究后，我不太清楚这样做的正确方法。

我尝试了通过按钮上的 eventListeners 更新显示的变体，无论按下哪个数字 display.textContent = button.innerText。但这不会更新显示屏上的整数。在正确方向上的任何帮助都会有所帮助！谢谢！

下面是HTML，下面是javascript。

<body>
    <div class = 'calculator-grid'>
        <div class = 'output'>
            <div class = 'previous-operand'></div>
            <div data-display class = 'display'></div>
        </div>
        <button data-all-clear class = 'span-two grey-button'>AC</button>
        <button data-delete class = 'grey-button'>DEL</button>
        <button data-operator class = 'orange-button'>÷</button>
        <button data-number >7</button>
        <button data-number>8</button>
        <button data-number>9</button>
        <button data-operator class = 'orange-button'>*</button>
        <button data-number>4</button>
        <button data-number>5</button>
        <button data-number>6</button>
        <button data-operator class = 'orange-button'>+</button>
        <button data-number>1</button>
        <button data-number>2</button>
        <button data-number>3</button>
        <button data-operator class = 'orange-button'>-</button>
        <button data-number class = 'span-two'>0</button>
        <button data-number>.</button>
        <button data-equals class = 'orange-button'>=</button>
    </div>

const operatorButtons = document.querySelectorAll('[data-operator]');
const clearButton = document.querySelector('[data-all-clear]');
const deleteButton = document.querySelector('[data-delete]');
const equalButton = document.querySelector('[data-equals]');
const display = document.querySelector('[data-display]');

function updateDisplay() {

}

function clear() {
    display.textContent = '';
}

clearButton.addEventListener('click', () => {
    clear();
})


numberButtons.forEach(button => button.addEventListener('click',() => {
    let buttonContent = button.innerText;
    display.textContent = buttonContent;
}))

这是我的计算函数，我将根据我按下的数字调用它。

function add(a, b) {
    return a + b;
}

function subtract(a, b) {
    return a - b;
}

function multiply(a , b) {
    return a * b;
}

function divide(a, b) {
    return a / b;
}

function operate(firstNum, secondNum, operator) {
    let result = 0;
    let operationResult;
    switch (operator) {
        case '+':
            operationResult = add(firstNum, secondNum);
            result += operationResult;
            break;
        case '-': 
            operationResult = subtract(firstNum, secondNum);
            result += operationResult;
            break;
        case '*':
            operationResult = multiply(firstNum, secondNum);
            result += operationResult;
            break;
        case '÷':
            operationResult = divide(firstNum, secondNum);
            result += operationResult;
            break;
    }
    return result;
}

Answer 1

您可能忘记定义 numberButtons 了吗？

您的代码显示 numberButtons 尚未定义，在 querySelectorAll 数字按钮并将它们定义为 numberButton 之后，您的代码应该可以工作。请参阅我的代码片段。

const operatorButtons = document.querySelectorAll('[data-operator]');
const clearButton = document.querySelector('[data-all-clear]');
const deleteButton = document.querySelector('[data-delete]');
const equalButton = document.querySelector('[data-equals]');
const display = document.querySelector('[data-display]');
const numberButtons = document.querySelectorAll('[data-number]')

function updateDisplay() {

}

function clear() {
    display.textContent = '';
}

clearButton.addEventListener('click', () => {
    clear();
})




numberButtons.forEach(button => button.addEventListener('click',() => {
    let buttonContent = button.innerText;
    display.textContent = buttonContent;
}))

<div class = 'calculator-grid'>
        <div class = 'output'>
            <div class = 'previous-operand'></div>
            <div data-display class = 'display'></div>
        </div>
        <button data-all-clear class = 'span-two grey-button'>AC</button>
        <button data-delete class = 'grey-button'>DEL</button>
        <button data-operator class = 'orange-button'>÷</button>
        <button data-number >7</button>
        <button data-number>8</button>
        <button data-number>9</button>
        <button data-operator class = 'orange-button'>*</button>
        <button data-number>4</button>
        <button data-number>5</button>
        <button data-number>6</button>
        <button data-operator class = 'orange-button'>+</button>
        <button data-number>1</button>
        <button data-number>2</button>
        <button data-number>3</button>
        <button data-operator class = 'orange-button'>-</button>
        <button data-number class = 'span-two'>0</button>
        <button data-number>.</button>
        <button data-equals class = 'orange-button'>=</button>
    </div>

Javascript - 帮助更新我的计算器显示以显示按下的按钮数

Javascript - Help to update the display of my calculator to display the number of the button pressed

html

calculator

addeventlistener