Как получить ввод ввода, чтобы остаться на экране, а не мигать через

Question

В настоящее время я пытаюсь создать приложение калькулятора чаевых, используя JS, HTML и CSS. Моя проблема заключается в том, что входное значение передается при нажатии кнопки, но после отправки значение просто мигает менее секунды, а затем исчезает. Я хотел бы, чтобы значение оставалось на экране после отправки.

let dinTotal = document.querySelector('#cost');
let dinService = document.querySelector('#service');
let dinSize = document.querySelector('#size');
let calcBtn = document.querySelector('button');
let total = 0;
let amount = document.querySelector('#amount')

calcBtn.addEventListener('click', function() {
  if(dinTotal.value >= 50 && dinService.value < 5 && dinSize.value < 5) {
    total = (dinTotal.value * 0.10) + dinTotal.value ;
    amount.textContent = total;
  }
})

<form>
  <h1>Tip & Dip✌️</h1>
  <hr>

  <!-- Bill Section -->

  <div>
    <label for='cost'>Dinning amount</label>
  </div>

  <input name='cost' id='cost' type='number' placeholder='$' required>

  <!-- Service Section-->

  <div class='top-space'>
    <label for='service'>How was the service</label>
  </div>

  <input name='service' id='service' type='number' placeholder='rate 1-10' required>

  <!-- Party Size-->
  <div class='top-space'>
    <label for='size'>Party Size</label>
  </div>

  <div>
    <input name='size' id='size' type='number' required>
  </div>
  
  <div class='top-space'>
    <button>LET'S CALCULATE...</button>
  </div>
  
  <hr>
  <h2>Total: $<span id='amount'>0</span></h2>
</form>

javascript html css

0

azaria.dee

Answer 1

используйте метод warnDefualt () обратного вызова события

calcBtn.addEventListener('click', function(event) {
    event.preventDefault()
}

Полный рабочий фрагмент (хотя он обновляется только для размера и значения меньше 5 и проверяет больше 50, надеюсь, вы знаете)

let dinTotal = document.querySelector('#cost');

let dinService = document.querySelector('#service');

let dinSize = document.querySelector('#size');

let calcBtn = document.querySelector('button');

let total = 0;

let amount = document.querySelector('#amount')

calcBtn.addEventListener('click', function(event) {
event.preventDefault()
if(dinTotal.value >= 50 && dinService.value < 5 && dinSize.value < 5)  

{
total = (dinTotal.value * 0.10) + dinTotal.value ;
 console.log(total)
 amount.textContent = total;

}

})

<form>
  <h1>Tip & Dip✌️</h1>
  <hr>
  <div>
    <label for='cost'>Dinning amount</label>
  </div>
  <input name='cost' id='cost' type='number' placeholder='$' required>
  <div class='top-space'>
    <label for='service'>How was the service</label>
  </div>

  <input name='service' id='service' type='number' placeholder='rate 1-10' required>
  <div class='top-space'>
    <label for='size'>Party Size</label>
  </div>

  <div>
    <input name='size' id='size' type='number' required>
  </div>

  <div class='top-space'>
    <button>LET'S CALCULATE...</button>
  </div>
  <hr>
  <h2>Total: $<span id='amount'>0</span></h2>
</form>

Answer 2

Поведение кнопки по умолчанию - отправить форму. Когда форма отправляется, если вы ее не останавливаете, она выгружает текущую страницу и отправляет данные на ее URL action . Без атрибута action форма отправляется на текущую страницу, вызывая перезагрузку.

Установите для атрибута type на своей кнопке значение button , чтобы он не был кнопкой отправки.

    <button type="button">LET'S CALCULATE...</button>

Как получить ввод ввода, чтобы остаться на экране, а не мигать через

2 ответа

Новые вопросы

javascript