Почему не работает код в примере?

Question

[Оксана Щербакова]

Изучаю в js if, else, switch. Не понимаю почему данная конструкция не работает, хотя на мой взгляд все верно.

Это Html:

<section>
        <p><b>Task 31</b></p>
        <p>В Казахстане, налог на объем двигателя объемом 500 куб составляет 2525 тенге, 1200 куб - 5050 тенге, 1600 - 8275 тенге,
        1900 куб - 9675 тенге, 2000 - 11075 тенге. Напишите программу, где пользователь может ввести в input объем двигателя до
        2000 куб включительно и получить налог на данный двигатель.</p>
        <div class="form-control">
            Input i-31
            <input class="i-31" type="number">
        </div>
        <button class="button-primary b-31">Task-31</button>
        <div class="out-31"></div>
    </section>

Это JS:

let out99 = document.querySelector('.out-31');
let inputW1 = +document.querySelector('.i-31');

function f31() {
    let inputW2 = inputW1.value; 
    
    switch (inputW2) {
         case 500:
            out99.innerHTML = 'Налог составляет 2525 тенге.';
            break;
         case 1200:
             out99.innerHTML = 'Налог составляет 5050 тенге.';
            break;
         case 1600:
             out99.innerHTML = 'Налог составляет 8275 тенге.';
            break;
         case 1900:
            out99.innerHTML = 'Налог составляет 9675 тенге.';
            break;
         case 2000:
            out99.innerHTML = 'Налог составляет 11075 тенге.';
            break;
         default:
            out99.innerHTML = 'Ошибка введите правильное значение.';
            break;
    }
};

document.querySelector('.b-31').onclick = f31;

Выглядеть должно так:

Answer 1

[krka92]

let inputW1 = +document.querySelector('.i-31');

Это будет NaN. Уберите унарный плюс

Comments

[Оксана Щербакова]

Пробывала не помогает.

[krka92]

let inputW2 = inputW1.value;
И добавьте его здесь

[krka92]

Оксана Щербакова, https://jsfiddle.net/k7auvrw5/2/

[Оксана Щербакова]

krka92, Почему то при добавлении вашего кода в мою программу vs code. При введение в input нужного числа например 500 console.log возвращает не 500, а 0.

Answer 2

[Виктор Л]

const $ = (selector) => document.querySelector(selector);
const out99 = $('.out-31');
const inputW1 = $('.i-31');
const buttonTask = $('.b-31');
const price = {
  500: 'Налог составляет 2525 тенге.',
  600: 'Налог составляет 8275 тенге.',
  1200:'Налог составляет 5050 тенге.',
  1900:'Налог составляет 9675 тенге.',
  2000: 'Налог составляет 11075 тенге.'
}


const getPrice = () => {
  out99.innerHTML = price[inputW1.value] || 'Введена не верная ставка'
};


buttonTask.addEventListener('click', getPrice);

Если у вас определенное кол-во ставок может не использовать input а использовать select

Comments

[Оксана Щербакова]

Может быть этот код и работает, но в описании сказано что я изучаю if, else, switch.
В связи с этим условием данный ответ мне не подходит.

[Виктор Л]

Оксана Щербакова, Ну для начала нужно наверное проверить работает он или нет, потом почитать про избыточность if else switch, а так конечно если вы поставили себе именно пройтись по задачам с ветвлением то да не подходит

[Оксана Щербакова]

Виктор Л, понимаете какая у меня странная проблема образовалась. По комментарию выше мне написали правильный ответ и он рабочий. Я скопировала его в VSCode и по каким то причинам скопированный код не работает корректно. Почему то input с введенным значением "500" при обработке кода возвращает в console.log мне 0. В связи с этим switch возвращает мне default.

[Оксана Щербакова]

Виктор Л, добавлю что проблема пошла дальше теперь что бы я не прописала в любой input который есть у меня в html документе возвращает мне значение 0.

[Виктор Л]

Создайте заново свою песочницу онлайн перенесите код туда, если все работает вернитесь в vs code, проверьте html и js

[Оксана Щербакова]

Виктор Л, Я так и делала код идентичен. Но я не понимаю почему не работает(

[Виктор Л]

ну пришлите архив посмотрю

[Оксана Щербакова]

Виктор Л, https://drive.google.com/file/d/1USCM5vSbvdhOtO9IM...

[Виктор Л]

ну проблема в том что у Вас два одинаковых инпута с классом
0: input.i-31
1: input.i-31

[Оксана Щербакова]

Виктор Л, все я нашла где у меня проблема и исправила ее большое спасибо