Ini adalah halaman penghitungan vokal sederhana. Ketika saya memasukkan kata DENGAN vokal, hasilnya muncul sesaat dan kemudian halaman disegarkan. Ketika tidak ada vokal, output tidak seperti yang diharapkan dan kemudian halaman di-refresh kembali. Adakah yang bisa membantu saya?

function findVow(event) {
  event.preventDefault();
  var input, result;
  // 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 = result;
};
<!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>
0
nataki 17 Januari 2021, 17:09

3 jawaban

Jawaban Terbaik

Anda mengirimkan formulir saat menggunakan tombol default.

Acara yang Anda inginkan tidak berlalu seperti yang Anda harapkan - itu adalah tombol yang dilewati.

BAIK gunakan type=button ATAU lebih baik: gunakan event.preventDefault seperti sekarang, tetapi pada acara kirim

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault();
  var input, result;
  // 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 = result;
});
<form id="myForm">
  <input id="text" placeholder="Enter a word" type="text" />
  <br><br>
  <button>Count vowels</button>
  <br>
</form>
<p id="demo"></p>
3
mplungjan 17 Januari 2021, 14:13

Tambahkan type='button' ke tombol di formulir

<button onclick="findVow()" type='button'>Count vowels</button>
1
Mhmdrz_A 17 Januari 2021, 14:12

Tambahkan type="button" ke tombol dan jika Anda ingin menangkap acara tombol, Anda dapat melakukannya seperti ini:

$('btnClick').on('click',function(event){
  event.preventDefault();
  var input, result;
  // 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 = result;
});
<!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>
1
Exterminator 17 Januari 2021, 14:20