Count the vowels of an input?

Question

Hi I am trying to count the vowels of the input of the form in my HTML using javascript currently with no success.

Here is my HTML

<!doctype html>
<html>
<head>
    <script src='p3-vowels.js'></script>
</head>
<body>
    <form action="demo_form.asp">
    Phrase: <input type="text" id = "input1" name="CountVowels" value="Put   Phrase Here"><br>
    <input type="button" id = "btn1" value="Check for Vowels">
    </form>
</body>
</html>

and here is my javascript

function vow(form){
    var a = form.CountVowels.value;
        flag = 0;

    for (var i = 0; i < a.length; i++){
        switch (a[i]){
            case 'a'
            case 'e'
            case 'i'
            case 'o'
            case 'u'
                flag++;
                break;
        }
    }
    alert(flag);
}

function init(){
    var button1 = document.getElementById("btn1")
    button1.onclick = vow;
}

window.onload = init;

You've asked the same question three times over the span of ~2 weeks. [Q3](http://stackoverflow.com/questions/30536053/need-help-debugging-vowel-counting-js) is a duplicate of [Q2](http://stackoverflow.com/questions/30521073/why-does-this-code-not-only-count-vowels) is a duplicate of [Q1](http://stackoverflow.com/questions/30242377/count-the-vowels-of-an-input). Instead of repeatedly asking the same question, ask for clarification on your original question. In the future, please refrain from doing this. (This is not the first instance on which you've repeatedly asked the same question.) — royhowie, Jun 01 '15 at 22:32

freefaller · Answer 1 · 2015-05-14T16:57:18.910

Another option to the other answers is to use a regular expression. This is not necessarily easier to understand, or particularly efficient, but I'm giving it as an alternative. (It also continues to prove the proverb: give a 100 programmers a problem to solve and you'll get 100 solutions)

The following expression used in javascript will match all the vowels, and you can use the returning array to see how many there are...

/[aeiou]/ig

The i makes it case insensitive, and the g means global so it will pick up multiple times.

Here is it in action...

function vow(form){
  var a = form.CountVowels.value;
  var matches = a.match(/[aeiou]/ig);
  var flag = 0;
  if (matches != null)
    flag = matches.length;
  alert(flag);
}

function init(){
  var button1 = document.getElementById("btn1")
  button1.onclick = function() { vow(document.getElementById("myform")); }
}

window.onload = init;

<form id="myform" action="demo_form.asp">
  Phrase: <input type="text" id = "input1" name="CountVowels" value="Put   Phrase Here"><br>
  <input type="button" id = "btn1" value="Check for Vowels">
</form>

AmmarCSE · Answer 2 · 2015-05-14T16:39:19.610

1

Replace your switch statement with

if(vowels.indexof(a[i]) > -1)

So

function vow(form){
    var vowels = ['a', 'e', 'i', 'o', 'u'];
    var a = form.CountVowels.value;
        flag = 0;

    for (var i = 0; i < a.length; i++){
       if(vowels.indexof(a[i]) > -1){
        flag++;
       }
    }
    alert(flag);
}

If you want to stick with the switch statement, you can, but you were missing colons ':'

            case 'a':
            case 'e':
            case 'i':
            case 'o':
            case 'u':
                flag++;
                break;

The first method is simpler as you are basically checking if the letter exists in the vowel array.

edited May 14 '15 at 16:39

answered May 14 '15 at 16:28

AmmarCSE

30,079
5
45
53

2

Since he doesn't have `break` between the cases, it falls through. He desn't need to repeat the code in each case. – Barmar May 14 '15 at 16:31
Would my code look like this function vow(form){ var a = form.CountVowels.value; flag = 0; var vowels = ['a', 'e', 'i', 'o', 'u']; if(vowels.indexof(a[i]) > -1){ flag++; } } } alert(flag); } function init(){ var button1 = document.getElementById("btn1") button1.onclick = vow; } window.onload = init; – joeygmurf May 14 '15 at 16:32
@joeygmurf, I have updated the first code snippet. That is how your code should look like. – AmmarCSE May 14 '15 at 16:34
If the user typed "HELLO WORLD" how many vowels would it find? – Yogi May 14 '15 at 16:34
Still no luck, pressing the button doesn't do anything, is there an error somewhere else in my code?? – joeygmurf May 14 '15 at 16:36

Barmar · Answer 3 · 2015-05-14T16:47:40.743

1

The vow function expects the form as a parameter, but you're not passing it. Give your form an ID so you can look it up and pass it.

button1.onclick = function() {
    vow(document.getElementById('demo_form'));
};

function vow(form) {
  var a = form.CountVowels.value;
  flag = 0;

  for (var i = 0; i < a.length; i++) {
    switch (a[i]) {
      case 'a':
      case 'e':
      case 'i':
      case 'o':
      case 'u':
      flag++;
      break;
    }
  }
  alert(flag);
}

function init() {
    var button1 = document.getElementById("btn1")
    button1.onclick = function() {
      vow(document.getElementById('demo_form'));
    };
}

window.onload = init;

<form action="demo_form.asp" id="demo_form">
  Phrase:
  <input type="text" id="input1" name="CountVowels" placeholder="Put   Phrase Here">
  <br>
  <input type="button" id="btn1" value="Check for Vowels">
</form>

You were also missing the : character after each case statement.

edited May 14 '15 at 16:47

answered May 14 '15 at 16:37

Barmar

741,623
53
500
612

Good point. Such an elementary mistake on my part. He was missing colons!! :) – AmmarCSE May 14 '15 at 16:39
`vow(document.getElementById('demo_form');` typo - missing closing bracket – freefaller May 14 '15 at 16:41
Okay I tried this and now the page actually does return a value but it is possible to make it so it works for both upper and lower case? – joeygmurf May 14 '15 at 16:43
`switch (a[i].toLowerCase())` or add the uppercase letters to the `switch` cases. – Barmar May 14 '15 at 16:44

score 1 · Answer 4 · answered May 14 '15 at 17:17

In the interest of providing a more readable and concise solution, you can think of counting vowels as a reduction of characters to a single number.

We can do this by reducing the input string to a count of vowels as so:

var countVowels = function countVowels(input) {
    return input.split('').reduce(function (a, c) {
       return a + ('aeiou'.indexOf(c) > -1);
    }, 0);
};

Yogi · Answer 5 · 2015-05-14T18:38:04.180

Looking at the other answers, I think this is The Simplest Solution

One line of code and case insensitive. It splits the string at vowels and returns the array length. Why make it more complicated with loops and switch statements?

update: I really like freefaller's solution using match(), which is equal in simplicity. The solution here has a slight edge in that it has wider browser support. Would be interesting to know if there's any speed advantage between the methods.

Solution:

var vowels = text.split(/[aeiou]/gi).length - 1;

Run code snippet to test:

<!DOCTYPE html>
<html>
<body>
  
  <h1>Vowel Counter Demo</h1>
  
    Count:<span id="count">0</span>
    <p>
    <input onKeyup="update(this.value)" placeholder="Type some text here" style="width:100%"> 
    
    <script type="text/javascript">
        
        function update( text ) {
            document.getElementById('count').innerHTML = vowels(text);  
        }
        
        function vowels( text ) {
            return text.split(/[aeiou]/gi).length - 1;
  
        }
        
    </script>
    
</body>
</html>

score 0 · Answer 6 · answered May 14 '15 at 16:37

Two problems:

1) You're missing colons after each case statement. I.e., it should be

case 'a': case 'b': etc.

not

case 'a'
case 'b'

2) You seem to be assuming that your click event will pass the form that the button is in to the function vow. It doesn't.

Just change this:

function vow(form){
    var a = form.CountVowels.value;

To:

function vow(){
    var a = document.getElementById("input1").value;

Also, you should really be programming with your Console window open to see JS errors. You would have seen both of those issues.

Count the vowels of an input?

6 Answers6

Linked

Related