计算输入的元音？答案

【问题标题】：Count the vowels of an input?计算输入的元音？
【发布时间】：2015-05-14 16:26:00
【问题描述】：

您好，我正在尝试使用 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;

【问题讨论】：

当按钮被点击时，表单没有在 vow 中定义
您在大约 2 周的时间里问了 3 次相同的问题。 Q3 是 Q2 的副本，是 Q1 的副本。不要重复问同一个问题，而是要求澄清你原来的问题。今后，请不要这样做。（这不是您第一次反复问同样的问题。）

标签： javascript html button input

【解决方案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>

【讨论】：

【解决方案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;

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

【讨论】：

由于他在两个案例之间没有break，所以它失败了。他不需要在每种情况下都重复代码。
我的代码会不会像这个函数 vow(form){ var a = form.CountVowels.value;标志 = 0; var vowels = ['a', 'e', 'i', 'o', 'u']; if(vowels.indexof(a[i]) > -1){ flag++; } } } 警报（标志）； } function init(){ var button1 = document.getElementById("btn1") button1.onclick = vow; } window.onload = 初始化；
@joeygmurf，我已经更新了第一个代码 sn-p。你的代码应该是这样的。
如果用户输入“HELLO WORLD”，它会找到多少个元音？
仍然没有运气，按下按钮没有做任何事情，我的代码中的其他地方是否有错误？？

【解决方案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 语句后的 : 字符。

【讨论】：

好点。就我而言，这是一个基本的错误。他少了冒号！！ :)
vow(document.getElementById('demo_form'); 错字 - 缺少右括号
好的，我试过了，现在页面确实返回了一个值，但可以让它同时适用于大写和小写？
switch (a[i].toLowerCase()) 或将大写字母添加到 switch 大小写。

【解决方案4】：

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

我们可以通过将输入字符串减少到元音的数量来做到这一点：

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

【讨论】：

【解决方案5】：

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

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

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

解决方案：

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

运行代码 sn-p 进行测试：

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

两个问题：

1) 每个 case 语句后都缺少冒号。也就是说，它应该是

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 错误。你会看到这两个问题。

【讨论】：