Count the vowels of an input?

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;

标签： javascript html button input

6条回答

女痞

2楼-- · 2019-03-03 08:58

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.

0人赞添加讨论(0) 举报

干净又极端

3楼-- · 2019-03-03 09:00

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.

0人赞添加讨论(0) 举报

一纸荒年 Trace。

4楼-- · 2019-03-03 09:05

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);
};

0人赞添加讨论(0) 举报

等我变得足够好

5楼-- · 2019-03-03 09:12

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>

0人赞添加讨论(0) 举报

贪生不怕死

6楼-- · 2019-03-03 09:14

Replace your switch statement with

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

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.

0人赞添加讨论(0) 举报

我命由我不由天

7楼-- · 2019-03-03 09:18

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>

0人赞添加讨论(0) 举报

Count the vowels of an input?

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间