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

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 25 Окт 2019 в 22:37

Возможный дубликат Как запретить кнопкам отправлять формы

–

Heretic Monkey

25 Окт 2019 в 22:45

Answer 1

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

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

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

0

IceMetalPunk 25 Окт 2019 в 22:45

Answer 2

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

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>

0

Willman.Codes 25 Окт 2019 в 22:52

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

2 ответа

Похожие вопросы

Связанные вопросы

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

javascript