Как сделать конструкцию if else?

Question

[ceo444]

Всем доброго дня! Учу JS. Хочу написать сайт с калькулятором дохода и чтобы в зависимости от цифры за год, человеку выдавало разные текстовые сообщения. Калькулятор годового дохода сделал, не могу разобраться как сделать конструкцию if else, чтобы допустим при цифре >= 200 000 в salaryYear, выдавало определенный текст в переменную info (она записана в html как p). Заранее спасибо!

const salaryYear = document.querySelector(".year-salary");
const formElement = document.querySelector(".calcform");
const salaryMonth = document.querySelector(".month-salary");
const info = document.querySelector(".information");


function calc(evt) {
    evt.preventDefault();
    salaryYear.value = salaryMonth.value * 12;
};

formElement.addEventListener('submit', calc);

Comments

[0xD34F]

Нужна помощь с if else?

Нет, не нужна.

Открываете правила, читаете, обращая особое внимание на пункты 3.4 и 3.6. Затем исправляете вопрос.

[Сергей delphinpro]

if (slaryYear.value > 200000) {
  info = 'some text';
}

[ceo444]

Сергей delphinpro, это нужно написать в теле функции или после нее?

[ceo444]

Сергей delphinpro, https://codepen.io/Paulceo/pen/YzYNWmE

[Сергей delphinpro]

ceo444,

function calc(evt) {
    evt.preventDefault();
    salaryYear.value = salaryMonth.value * 12;
    if (salaryYear.value > 200000) {
        info.innerHTML = 'text';
    }
};

[ceo444]

Сергей delphinpro, а как прописать дальше, чтобы допустим если меньше 200 000, то другой текст выдавало. Пробую через else if, но остается 1 текст.

[Сергей delphinpro]

ceo444, а может вы составите задание и я полностью напишу вам программу? //sarcasm off

[Сергей delphinpro]

ceo444, https://learn.javascript.ru/

Answer 1

[ArturMavlidov]

if (salaryYear >= 200000) {
info.innerHTML = `текст`
}

Comments

[ceo444]

а как прописать дальше, чтобы допустим если меньше 200 000, то другой текст выдавало. Пробую через else if, но остается 1 текст.

[ArturMavlidov]

ceo444, Не совсем понимаю. Если просто выдавать текст в зависимости от условия, то:
if (salaryYear >= 200000) {
info.innerHTML = `текст`;
} else if (salaryYear < 200000) {
info.innerHTML = `текст`;
}
И так прописать для каждого возможного условия.
Кстати, таким образом innerHTML вставляет новый текст, заменяя предыдущий. Если нужно оставить предыдущий текст и к нему добавить новый, то можно использовать insertAdjacentHTML, либо info.innerHTML+= 'текст'

[ceo444]

ArturMavlidov, но почему то не отображается текст.

function calc(evt) {
    evt.preventDefault();
    salaryYear.value = salaryMonth.value * 12;
    if (salaryYear > 200000) {
        info.innerHTML = "текст";
    } else if (salaryYear < 200000) {
        info.innerHTML = "текст 2";
    }
};

[ArturMavlidov]

ceo444, пытаешься вывести в переменную info, которая в html - тег p. выведи в консоль переменную, посмотри, действительно ли нужный параграф. +, может в нем текст белыми буквами на белом фоне? После рассчёта открой инспектор кода, найди в dom-дереве нужный параграф и посмотри, есть ли в нём текст

[ceo444]

ArturMavlidov, проверил, это тот параграф, вот в песочнице код https://codepen.io/Paulceo/pen/YzYNWmE

[ArturMavlidov]

ceo444, В условиях указано salaryYear, а нужно salaryYear.value

Правильный вариант:

if (salaryYear.value >= 200000) {
    infoText.innerHTML = "текст";
  } else if (salaryYear.value < 200000) {
    infoText.innerHTML = "текст2";
  }

И да, тексту в information нужно задать другой цвет, иначе его не видно на белом фоне

[ceo444]

ArturMavlidov, разобрался! спасибо за уделенное время!

[ArturMavlidov]

ceo444, рад, что смог помочь. Прошу прощения, что запутал своим первым ответом, где в условии указал сам инпут, а не значение этого инпута