Question

您好我正在尝试使用javascript计算我的HTML中表单输入的元音，但目前没有成功。

这是我的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>

这是我的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;

Answer 1

其他答案的另一个选择是使用正则表达式。这不一定更容易理解，也不是特别有效，但我将其作为替代方案。（它也继续证明这句谚语：给100个程序员一个问题来解决，你将获得100个解决方案）

javascript中使用的以下表达式将匹配所有元音，您可以使用返回的数组来查看有多少元音...

/[aeiou]/ig

i使其不区分大小写，g表示全局，因此会多次拾取。

这是行动......

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>

Answer 2

用

替换你的switch语句

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

如果你想坚持使用switch语句，你可以，但是你错过了冒号'：'

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

第一种方法更简单，因为您基本上检查元音数组中是否存在字母。

Answer 3

vow函数需要将表单作为参数，但您没有传递它。给你的表单一个ID，这样你就可以查找并传递它。

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>

在每个:语句后，您还错过了case个字符。

Answer 4

为了提供更易读，更简洁的解决方案，您可以将元数计算为将字符减少为单个数字。

我们可以通过将输入字符串减少为元音数来实现：

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

Answer 5

看看其他答案，我认为这是最简单的解决方案

一行代码和不区分大小写。它将字符串拆分为元音并返回数组长度。为什么使用循环和switch语句使它变得更复杂？

<强>更新我真的很喜欢使用match（）的freefaller解决方案，这在简单性上是相同的。这里的解决方案略有优势，因为它具有更广泛的浏览器支持。知道这些方法之间是否有任何速度优势会很有趣。

<强>解决方案：

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

运行代码段进行测试：

<!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>

Answer 6

两个问题：

1）您在每个案例陈述后都会遗漏冒号。即，它应该是

case 'a': case 'b':等。

不

case 'a'
case 'b'

2）您似乎假设您的点击事件会将按钮所在的表单传递给函数vow。它没有。

只需改变一下：

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

要：

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

此外，您应该打开控制台窗口进行编程，以查看JS错误。你会看到这两个问题。

计算输入的元音？

6 个答案: