Count the vowels of an input?

2019-03-03 09:00发布

站内文章 / JavaScript
13 0 0

问题:

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;

回答1:

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>



回答2:

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.



回答3:

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.



回答4:

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


回答5:

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>



回答6:

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.



标签： javascript html button input
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~