发表新帖
发表新帖

Count the vowels of an input?

后端 未结
关注
6 1970
小鲜肉
小鲜肉 2021-01-27 10:25

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
相关标签:
6条回答
  • 慢半拍i
    2021-01-27 10:51

    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)
  • 臣服心动
    2021-01-27 10:56

    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)
  • 青春惊慌失措
    2021-01-27 10:57

    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)
  • 情歌与酒
    2021-01-27 10:58

    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)
  • 北荒
    2021-01-27 11:00

    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.

    0 讨论(0)
  • 轻奢々
    2021-01-27 11:15

    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)
 看不清?
提交回复
热议问题