I'm trying to run a simple Javascript program which tells the user the number of vowels in the string entered. I'm writing this code for class practical and since I don't know much about programming, I will just try to explain my problem the best I can. I save the Notepad file in .html form and when i open it in my browser, everything works just alright except for the actual function. When the string is entered, for instance if the word "bus" is entered in the input box, a pop up window saying "This page says: The number of vowels in the string: 0" No matter what string is entered it will always tell me that there are zero vowels even if there are vowels present in the string. I'm sharing the code below. Kindly look for any errors or missing line and explain it with correction.

function countvowels() {
  var s, i, ch, c;
  c = 0;
  s = form1.t1.value;
  for (i = 0; i <= s.lenght; i  ) {
    ch = s.charAt(i);
    if (ch == "A" || ch == "E" || ch == "I" || ch == "O" || ch == "U" || ch == "a" || ch == "e" ||
      ch == "i" || ch == "o" || ch == "u")
      c  ;
  }
  alert("The total number of vowels in string are: "   ""   c);
}

h3 {
  font-style: italic;
  text-decoration: underline
}

body {
  background-color: lightblue;
  font-size: 22px
}

<h3 align="center">Count the number of vowels of string.</h3>
<form name="form1">
  <b>Enter the string to count vowels:</b><br><br>
  <input type="text" name="t1"><br><br>
  <input type="button" name="btncheck" value="Count Vowels" onClick="countvowels()">
</form>

CodePudding user response：

Try this one.

I also simplify your code a little bit by use toLowerCase()

function countvowels() {
  var s, i, ch, c;
  c = 0;
  s = form1.t1.value;
  for (i = 0; i <= s.length; i  ) {
    ch = s.charAt(i).toLowerCase();
    if ( ch == "a" || ch == "e" || ch == "i" || ch == "o" || ch == "u")
      c  ;
  }
  alert("The total number of vowels in string are: "   ""   c);
}

h3 {
  font-style: italic;
  text-decoration: underline
}

body {
  background-color: lightblue;
  font-size: 22px
}

<h3 align="center">Count the number of vowels of string.</h3>
<form name="form1">
  <b>Enter the string to count vowels:</b><br><br>
  <input type="text" name="t1"><br><br>
  <input type="button" name="btncheck" value="Count Vowels" onClick="countvowels()">
</form>

CodePudding user response：

There isn't an error in your code. There are multiple.

1. form1.t1.value: It's not a good idea to rely on browsers to "magically define" elements and bamboozle yourself in frustration when you get confused. A more standard way would be something like: s = document.querySelector('input[name="t1"]').value;
2. Spelling matters in code. s.length, not s.lenght
3. <=: Array indexes start from zero, while .length gives the count of the array, so it should be <, not <= in your for loop condition
4. This isn't an error, but instead of ch.charAt(i) you could simply do ch[i], since strings are in its purest an array
5. You can perform a case insensitive check by toLowerCaseing the input string, then declare an array of values and check if it's included, e.g. const vowels = ['a', 'e', 'i', 'o', 'u']; if(vowels.includes(ch.toLowerCase()))
6. This also isn't an error, but I have no idea why you're doing alert("The total number of vowels in string are: " "" c);. What's the extra "" for? Delete it if you don't know.

So, with all my suggestions your code would look something like:

function countvowels() {
  var s, i, ch, c;
  c = 0;
  s = document.querySelector('input[name="t1"]').value;
  for (i = 0; i < s.length; i  ) {
    ch = s[i];
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    if(vowels.includes(ch.toLowerCase()))
      c  ;
  }
  alert("The total number of vowels in string are: "   c);
}

h3 {
  font-style: italic;
  text-decoration: underline
}

body {
  background-color: lightblue;
  font-size: 22px
}

<h3 align="center">Count the number of vowels of string.</h3>
<form name="form1">
  <b>Enter the string to count vowels:</b><br><br>
  <input type="text" name="t1"><br><br>
  <input type="button" name="btncheck" value="Count Vowels" onClick="countvowels()">
</form>

CodePudding user response：

while i think it is improper to ask this question and me answering this coz it is a uni work but i will still give you hint.

your js function is not getting the string you are entering.