Почему не срабатывает условие if else?

Question

[Aleksandr Yurchenko]

Всем привет!
Подскажите, как исправить проверку, что бы она работа корректно:
Данный код, забирает все имеющиеся input[type=radio], после проверкой if смотрит у какого из элементов стоит checked и забирает из этого объекта data-operation и передает в функцию для вычисления.

let buttonsOperations = document.querySelectorAll('input[type=radio]');
for (let i = 0; i < buttonsOperations.length; i++) {
    if (buttonsOperations[i].checked === true) {
        let operator = buttonsOperations[i].getAttribute('data-operation');
        calculatorOperator(operator);
    } else {
        output.innerHTML = '<strong>Ошибка!</strong> Арифметическая операция не выбрана.';
    }
}

Самое странное, что если убрать

else { output.innerHTML = '<strong>Ошибка!</strong> Арифметическая операция не выбрана.'; }

, то арифметические операции работают как надо, а вот если добавить else (что я очень хочу сделать), то происходит следующее. Он выполняет первое условие и переходить ко второму, то есть всегда получаю: Ошибка! Арифметическая операция не выбрана.

Это вполне логично, так как проверка идет внутри for, и на данный момент у меня 4 элемента, поэтому при любых раскладах буду получать:

buttonsOperations[i].checked === false → 3шт.
buttonsOperations[i].checked === true → 1шт.

Поэтому получается, что он выполняет 1 условие и переходи ко второму. И я буксую на этом. Как составить условие, при котором, проверка выкинет ошибку: "Не выбрана ни одна арифметическая операция", только тогда, когда не выбран ни один input (typy=radio).

Возможно получилось несколько сумбурно :) за что извиняюсь, просто в голове вертится понимание из-за чего этот баг лезет, но я напрочь не понимаю, как его устранить((

Поэтому на всякий случай выложу:
Калькулятор
Скрипт

Answer 1

[Рональд Макдональд]

Если я правильно понял задачу (очень уж вы её размазали), вам надо, чтобы ошибка выкидывалась, когда не выбран ни один радиобуттон.

Перед условием заведите переменнуюbool allNotChecked со значением true, затем в первом цикле поверяйте состояние элементов, если какой-то из них выбран, то присваивайте переменной false. После цикла - второе условие, если allNotChecked останется true, то выдавайте ошибку. Поняли?

Comments

[Aleksandr Yurchenko]

Вы имели ввиду, что-то вроде этого?

for (let i = 0; i < buttonsOperations.length; i++) {
    elementEnable(firstArgument, 'input', btnResult);
    elementEnable(secondArgument, 'input', btnResult);
    elementEnable(buttonsOperations[i], 'input', btnResult);

    let allNotChecked = true;
    if (buttonsOperations.checked === true) {
        if (allNotChecked) {
            allNotChecked = false;
            let operator = buttonsOperations[i].getAttribute('data-operation');
            calculatorOperator(operator);
            elementDisable(btnResult);
        }
    } else {
        output.innerHTML = '<strong>Ошибка!</strong> Арифметическая операция не выбрана.';
    }
}

Честно говоря не понял, как тут флаг вкорячить и проверить на true\fasle

[Рональд Макдональд]

Aleksandr Yurchenko, нет, совсем не так.
Смотрите логику: вы заводите логическую переменную, затем проверяете состояние элементов. Если хотя бы один из них выбран, то переменная принимает отрицательное значение. Если все не выбраны, то она остаётся положительной. После этого проводится проверка, положительное оно или отрицательное и в зависимости от состояния выводится предупреждение.

let allNotChecked = true;
for (let i = 0; i < buttonsOperations.length; i++) {
    elementEnable(firstArgument, 'input', btnResult);
    elementEnable(secondArgument, 'input', btnResult);
    elementEnable(buttonsOperations[i], 'input', btnResult);
    if (buttonsOperations.checked === true) {
            allNotChecked = false;
            let operator = buttonsOperations[i].getAttribute('data-operation');
            calculatorOperator(operator);
            elementDisable(btnResult);
    } 
if (allNotChecked != true) {
        output.innerHTML = '<strong>Ошибка!</strong> Арифметическая операция не выбрана.';
    }
}

В код особо не вникал, так что старайтесь не копипастить.

[Aleksandr Yurchenko]

Рональд Макдональд, спасибо, что разжевали! Действительно использование флагов рулит :) Вот такой вариант заработал.

let allNotChecked = true;
for (let i = 0; i < buttonsOperations.length; i++) {
    elementEnable(firstArgument, 'input', btnResult);
    elementEnable(secondArgument, 'input', btnResult);
    elementEnable(buttonsOperations[i], 'input', btnResult);
    if (buttonsOperations[i].checked === true) {
        allNotChecked = false;
        let operator = buttonsOperations[i].getAttribute('data-operation');
        calculatorOperator(operator);
        elementDisable(btnResult);
    }
    if (allNotChecked === true) {
        output.innerHTML = '<strong>Ошибка!</strong> Арифметическая операция не выбрана.';
    }
}

Answer 2

[h88p]

Без цикла

if (!(Array.from(document.querySelectorAll('input[type=radio]')).filter(w => w.checked).length > 0)) {
   output.innerHTML = '<strong>Ошибка!</strong> Не выбрана ни одна арифметическая операция';
}

Answer 3

[Adamos]

let buttonsOperations = document.querySelectorAll('input[type=radio]:checked');
if(buttonsOperations.length > 0) {
        calculatorOperator(buttonsOperations[0].getAttribute('data-operation'));
} else {
        output.innerHTML = '<strong>Ошибка!</strong> Арифметическая операция не выбрана.';
}