Отменить атрибут disable у кнопки при изменение значений input?

Question

[Aleksandr Yurchenko]

Здравствуйте.
Собственно вопрос в название темы. Так как js дается мне туговато решил начать с тривиальных вещей, написать простенький калькулятор.

В целом калькулятор готов, есть даже проверки: пустое поле, ввод текста вместо цифр и т.д. Но вот одна проверка, которую я хочу реализовать поставила меня в тупик. С помощью: btnResult.setAttribute('disabled', 'disabled'); вешаю на кнопку "Получить результат" атрибут disable, а как убрать этот атрибут, когда поменялось одно из значений в поле input и на момент блокировки поменять надпись в кнопке?

Насчет замены текста знаю что нужно сделать через innerHTML, а вот как написать условие, что значения input изменилось → btnResult.setAttribute('disabled', ''); честно говоря ХЗ ...

Сам калькулятор

Так же приложу скрипт

window.onload = function () {
    let btnResult = document.querySelector('button[name=solve]');
    let firstArgument = document.querySelector('input[name=first_argument]');
    let secondArgument = document.querySelector('input[name=second_argument]');
    let result = document.querySelector('.result');
    let resultBlock = document.querySelector('div[data-result=result]');

    btnResult.addEventListener('click', function () {
        classToggle('on_opacity', 'off_opacity', resultBlock);
        classToggle('on_opacity', 'off_opacity', result);

        if (firstArgument.value !== '' && secondArgument.value !== '') {
            if (isNaN(firstArgument.value) === false && isNaN(secondArgument.value) === false) {
                let checkBoxAddition = document.querySelector('#addition');
                let checkBoxSubtraction = document.querySelector('#subtraction');
                let checkBoxMultiplication = document.querySelector('#multiplication');
                let checkBoxDivided = document.querySelector('#divided');

                if ((firstArgument.value % 1) === 0 && (secondArgument.value % 1) === 0) {
                    btnResult.setAttribute('disabled', 'true');
                    if (firstArgument.oninput || secondArgument)

                        if (checkBoxAddition.checked === true) {
                            let addition = parseInt(firstArgument.value) + parseInt(secondArgument.value);
                            result.innerHTML = 'Результат сложения = <strong>' + addition + '</strong>';
                        } else if (checkBoxSubtraction.checked === true) {
                            let subtraction = parseInt(firstArgument.value) - parseInt(secondArgument.value);
                            result.innerHTML = 'Результат вычитания = <strong>' + subtraction + '</strong>';
                        } else if (checkBoxMultiplication.checked === true) {
                            let multiplication = parseInt(firstArgument.value) * parseInt(secondArgument.value);
                            result.innerHTML = 'Результат умножения = <strong>' + multiplication + '</strong>';
                        } else if (checkBoxDivided.checked === true) {
                            let divided = parseInt(firstArgument.value) / parseInt(secondArgument.value);
                            if (isFinite(divided)) {
                                result.innerHTML = 'Результат деления = <strong>' + divided + '</strong>';
                            } else {
                                result.innerHTML = '<strong>Делить на ноль нельзя!</strong>';
                            }
                        } else {
                            result.innerHTML = '<strong>Ошибка!</strong> Арифметическая операция не выбрана.';
                        }
                } else {
                    if (checkBoxAddition.checked === true) {
                        let addition = parseFloat(firstArgument.value) + parseFloat(secondArgument.value);
                        result.innerHTML = 'Результат сложения = <strong>' + addition + '</strong>';
                    } else if (checkBoxSubtraction.checked === true) {
                        let subtraction = parseFloat(firstArgument.value) - parseFloat(secondArgument.value);
                        result.innerHTML = 'Результат вычитания = <strong>' + subtraction + '</strong>';
                    } else if (checkBoxMultiplication.checked === true) {
                        let multiplication = parseFloat(firstArgument.value) * parseFloat(secondArgument.value);
                        result.innerHTML = 'Результат умножения = <strong>' + multiplication + '</strong>';
                    } else if (checkBoxDivided.checked === true) {
                        let divided = parseFloat(firstArgument.value) / parseFloat(secondArgument.value);
                        if (isFinite(divided)) {
                            result.innerHTML = 'Результат деления = <strong>' + divided + '</strong>';
                        } else {
                            result.innerHTML = '<strong>Делить на ноль нельзя!</strong>';
                        }
                    } else {
                        result.innerHTML = '<strong>Ошибка!</strong> Арифметическая операция не выбрана.';
                    }
                }
            } else if (isNaN(firstArgument.value) === true && isNaN(secondArgument.value) === false) {
                result.innerHTML = '<strong>Ошибка!</strong> Введен текст в первом аргументе, допускается ввод только чисел.';

            } else if (isNaN(firstArgument.value) === false && isNaN(secondArgument.value) === true) {
                result.innerHTML = '<strong>Ошибка!</strong> Введен текст во втором аргументе, допускается ввод только чисел.';

            } else {
                result.innerHTML = '<strong>Ошибка!</strong> Введен текст вместо чисел в первом и втором аргументах.';
            }
        } else if (firstArgument.value === '' && secondArgument.value !== '') {
            result.innerHTML = '<strong>Ошибка!</strong> Первый аргумент не указан.';
        } else if (firstArgument.value !== '' && secondArgument.value === '') {
            result.innerHTML = '<strong>Ошибка!</strong> Второй аргумент не указан.';
        } else {
            result.innerHTML = '<strong>Ошибка!</strong> И первый и второй аргументы не заданы.';
        }
    });

    // Заменяет существующий класс на необходимый
    function classToggle(existingClass, addedClass, elem) {
        elem.classList.remove(existingClass);
        elem.classList.add(addedClass);
    }
};

И вопрос по самому скрипту, точнее по правильности написания проверок, просто процентов 60% скрипта заняли они :) вот я и думаю, это нормально или не совсем или есть альтернативный способ, проверить корректность (ввода, выбора арифметических операций).

С js редко работаю, а с нативным ещё реже :) поэтому сильно не пинайте.

Answer 1

[Aleksandr Yurchenko]

Говорят: «утро вечера мудренее», у меня получилось с точностью наоборот :)

Решил вопрос путем, создания функций:

// Ставим  disable у кнопки "Показать результат"
    function btnDisable() {
        btnResult.innerHTML = 'Кнопка заблокирована! Пока не будут введены новые значения.';
        btnResult.disabled = true;
    }
    
    // Убираем disable у кнопки "Показать результат"
    function btnEnable() {
        btnResult.innerHTML = 'Результат операции';
        btnResult.disabled = false;
    }

И вызвал функции в нужном месте.

Answer 2

[Stalker_RED]

On change
removeAttribute()

Comments

[00absolute_zero0]

очень сильно помогли сейчас, спасибо огромное