Кнопка «Очистить» не срабатывает HTML + JS?

Question

[Кирилл Кузьминых]

https://codepen.io/sowenka/pen/eYywExY?editors=1010

Помогите не могу сообразить, считает сумму на JS , но кнопка Очистить не срабатывает "Not found" или NaN выдает, По задумке вводишь числа в поля , суммируешь. А очистить можешь в любой момент либо уже с суммой либо очищаешь поля которые вводишь с клавиатуры.

Затык(

Comments

[Ankhena]

Действительно затык.
Reset очищает форму. Формы нет, очищать нечего.

p.s. кнопки удобнее делать тегами button, чем инпутами.

[alexalexes]

У вас для кнопки "Очистить" обработчика никакого нет. В чем затык его написать?

Answer 1

[Владислав Великоиваненко]

А с чего у тебя должна отрабатывать кнопка "Очистить", если на ней нет никакого обработчика? Сделай по-человечески, задай кнопке класс clear-btn и напиши обработчик:

let clearBtn = document.querySelector('.clear-btn');

clearBtn.addEventListener('click', () => {
  resultElement.textContent = '';
  tNumber.value = undefined;
  aNumber.value = undefined;
  rNumber.value = undefined;
})

Comments

[Кирилл Кузьминых]

https://codepen.io/sowenka/pen/OJzexzG?editors=1010

Сейчас поля очищает, но при нажатии "Посчитать" все схлапывается. Помогите, я пока только учусь.

[Владислав Великоиваненко]

mmosow, let clear-btn, что? НИКОГДА нельзя так называть переменные (просто clearBtn), изучите хотя бы основы именования переменных и такие вопросы отпадут сами собой. Неужели так трудно зайти на этот сайт и изучить основы?

Вот рабочий код для твоей задачи, дальше сам, либо другой вопрос отдельный делай, не в этой теме:
P.s. HTML код чуть изменён, используй мой

<div class="banks">
  <div class="banks__tinkoff">
    <div class="form">
      <input
             class="tinkoff__input"
             type="number"
             name="bankTinkoff"
             placeholder="14000.00"/>
      <label for="tinkoff"><img	src="/img/tinkoff.svg" alt="логотип банк" width="80"/></label>
      </div>
      <div class="banks__alfa">
      <input
             class="alfa__input"
             type="number"
             name="bankAlfa"
             placeholder="10000.00"/>
      <label for="alfa"><img src="/img/Alfa-Bank.svg" alt="логотип банк" width="80"/></label>
      </div>

      <div class="banks__rosbank">
      <input
             class="rosbank__input"
             type="number"
             name="bankrosbank"
             placeholder="5000.00"/>
      <label for="rosbank"><img src="/img/rosbank.svg" alt="логотип банк" width="80"/></label>
      </div>
      <div class="banks__btn">
      <p>Сумма : <span class="result"></span></p>
      <button class="btn">Посчитать</button>
      <input class="clear-btn" type="reset" value="Очистить" />
      </div>
    </div>
  </div>  
</div>

let btnElement = document.querySelector(".btn");
let resultElement = document.querySelector (".result");
let clearBtn = document.querySelector('.clear-btn');

let tNumber = document.querySelector('[name="bankTinkoff"]');
let aNumber = document.querySelector('[name="bankAlfa"]');
let rNumber = document.querySelector('[name="bankrosbank"]');



btnElement.addEventListener("click", () => {
  if(tNumber.value === '' || aNumber.value === '' || rNumber.value === ''){
    resultElement.textContent = 'Заполните все поля';
  }
  else{
      let res = parseFloat(tNumber.value) + parseFloat(aNumber.value) + parseFloat(rNumber.value);
      resultElement.textContent = res;
  }
})

clearBtn.addEventListener('click', () => {
	resultElement.textContent = '';
	tNumber.value = undefined;
	aNumber.value = undefined;
	rNumber.value = undefined;
})

[Stanislav]

ну и токсик

[Владислав Великоиваненко]

nedosekinstanislav, нет, всего лишь учу людей гуглить информацию, тем более такую простую из разряда "А как открыть холодильник", иначе можно дальше не продолжать заниматься кодом, пока отсутствует такой навык.

[Кирилл Кузьминых]

Спасибо Владислав, вы очень помогли.

[Владислав Великоиваненко]

mmosow, успехов! :)