Javascript - Помогите обновить отображение моего калькулятора для отображения номера нажатой кнопки - PullRequest
Новая
       24

Javascript - Помогите обновить отображение моего калькулятора для отображения номера нажатой кнопки

0 голосов
/ 13 апреля 2020

Я строю калькулятор, используя 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;
}

1 Ответ

1 голос
/ 13 апреля 2020

Возможно, вы забыли определить 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>
...