Страница обновляется после нажатия кнопки

#javascript #page-refresh

#javascript #страница-обновить

Вопрос:

Это простая страница с подсчетом гласных. Когда я вставляю слово с гласными, результат отображается на секунду, а затем страница обновляется. Когда гласных нет, вывод не соответствует ожидаемому, а затем страница снова обновляется. Кто-нибудь может мне помочь, пожалуйста?

 function findVow(event) {
  event.preventDefault();
  var input, resu<
  // Get value of the input
  input = document.getElementById('text').value;
  var regex = /[aeiou]/gi;
  //unify the case and get the length
  var count = input.match(regex).length;

  if (count > 0) {
    result = "Vowels found : "   count;
  } else {
    result = "No vowels found";
  }
  //print the number of vowels if any
  document.getElementById("demo").innerHTML = resu<
};

 <!DOCTYPE html>
<html>

<head>
  <title>challenge1</title>
</head>

<body>
  <form>
    <input id="text" placeholder="Enter a word" type="text" />
    <br><br>
    <button onclick="findVow()">Count vowels</button>
    <br>
    <p id="demo"></p>
  </form>
  <script type="text/javascript" src="script.js"></script>
</body>

</html>

Развернуть фрагмент

1. type=»button» — вы отправляете сейчас

2. Событие не работает при вызове функции, вы не можете передать событие в качестве аргумента при вызове функции

3. Быстрое решение — это использовать onclick="findVow(event)" . Или вы можете удалить <form> метки.

Ответ №1:

Вы отправляете форму при использовании кнопок по умолчанию.

Событие, которое вы хотели, передается не так, как вы ожидаете, — передается кнопка.

ЛИБО используйте type=button, ЛИБО лучше: используйте event.preventDefault, как сейчас, но в событии отправки

 document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault();
  var input, resu<
  // Get value of the input
  input = document.getElementById('text').value;
  var regex = /[aeiou]/gi;
  //unify the case and get the length
  var count = input.match(regex).length;

  if (count > 0) {
    result = "Vowels found : "   count;
  } else {
    result = "No vowels found";
  }
  //print the number of vowels if any
  document.getElementById("demo").innerHTML = resu<
});

 <form id="myForm">
  <input id="text" placeholder="Enter a word" type="text" />
  <br><br>
  <button>Count vowels</button>
  <br>
</form>
<p id="demo"></p>

Развернуть фрагмент

Ответ №2:

добавить type='button' к кнопке в форме

 <button onclick="findVow()" type='button'>Count vowels</button>

Ответ №3:

Добавьте type="button" к кнопке, и если вы хотите захватить событие кнопки, вы можете сделать это следующим образом:

 $('btnClick').on('click',function(event){
  event.preventDefault();
  var input, resu<
  // Get value of the input
  input = document.getElementById('text').value;
  var regex = /[aeiou]/gi;
  //unify the case and get the length
  var count = input.match(regex).length;

  if (count > 0) {
    result = "Vowels found : "   count;
  } else {
    result = "No vowels found";
  }
  //print the number of vowels if any
  document.getElementById("demo").innerHTML = resu<
});

 <!DOCTYPE html>
<html>

<head>
  <title>challenge1</title>
</head>

<body>
  <form>
    <input id="text" placeholder="Enter a word" type="text" />
    <br><br>
    <button class="btnClick" type="button" >Count vowels</button>
    <br>
    <p id="demo"></p>
  </form>
  <script type="text/javascript" src="script.js"></script>
</body>

</html>

Развернуть фрагмент