Question

我需要为一个类调试这段代码，我已经修复了很多东西，但我不确定它为什么不起作用。它应该计算短语中元音的数量，并在我相信的div元素中返回它们。但是它总是返回＆＃34;未定义的元音＆＃34;

这是html

<!doctype html>
<html>
<!-- vowels.html -->
<head>
    <meta charset="utf-8">
    <title>Vowels</title>   
    <link rel="stylesheet" href="../css/easy.css">      
    <script src="vowels.js"></script>
</head>

<body>
    <header>
        <h1>I'd like to buy a vowel</h1>
    </header>

    <main>
        <label>
            Type a phrase here:
            <input type='text' id='textBox'> </input>
        </label>
        <button id='countBtn' type='button'> <!--changed countButton to countBtn-->
            Count Vowels (a,e,i,o,u)
        </button>

        <div id='outputDiv'>
        </div>
    </main>

    <footer>
        <hr> 
        <p>&copy; UO CIS 111 2015 April&trade; LLC</p>
    </footer>   
</body>
</html>

这是我的JS

function countVowels() {
    var textBox, phrase, i, pLength, letter, vowelCount; //removed alert count vowels
    textBox = document.getElementById('textBox'); //corrected spelling of   Element
    phrase = textBox.value;
    phrase = phrase.toLowerCase;  //switched to lower case
    for(i = 0; i < phrase.length; i+= 1)  {
        letter = phrase[i];
        if (letter == 'a' ||  letter == 'e' || letter == 'i' || letter == 'o' ||  letter == 'u') { //fixed the spelling of letter. added another = in letter = 'e'
            vowelCount = vowelCount + 1;   
        }
    }
    alert(vowelCount + ' vowels');
    var outArea = document.getElementById('outputDiv'); //corrected to     outputDiv instead of outputId and put document. in front of the getElement
    outArea.innerHTML = vowelCount + ' vowels in ' + phrase;
}

function init(){
    alert('init vowels');
    var countTag = document.getElementById('countBtn'); //switched to semi-   colon and condensed to single line
    countTag.onclick = countVowels;
}

window.onload = init;

这是JSFiddle

Answer 1

您还可以使用RegExp获得更轻薄的代码：http://jsfiddle.net/4o67u3js/

HTML：

<p id = "text">
    Lorem ipsum dolor sit amet.
</p>
<p id = "result"># of vowels: <span></span></p>

JS：

$(function() {
    var vowelsCount = $("#text").text().match(/[aeiou]/gi).length;
    $("#result > span").html(vowelsCount);
});

这是一个更算法的解决方案。并且，是的，它定义了原型上的一个函数，那些反对该实践的人可以强制重写函数。

普通JS：

var str = "Lorem ipsum dolor sit amet.";

String.prototype.vowelsCount = function() {
    var str = this.toLowerCase(),
        len = str.length,
        index = 0,
        vowels = ["a", "e", "i", "o", "u"],
        count = 0;

    for( ; index < len; vowels.indexOf(str[index++]) !== -1 ? count++ : count);

    return count;
};

console.log(str.vowelsCount());

Answer 2

您需要做的第一件事是确保在窗口加载时初始化init（）函数。将window.onload = init;更改为window.onload = init()。

接下来，将您的双等号更改为三等于。通常good practice这样做：

if (letter === 'a' || letter === 'e' || letter === 'i' || letter === 'o' || letter === 'u')

然后，为了使您的计数器有效，您需要在toLowerCase() 中致电phrase = phrase.toLowerCase。它应该如下所示：phrase = phrase.toLowerCase()

这是您修复的JS代码：

function countVowels() {
    var textBox, phrase, i, pLength, letter, vowelCount; //removed alert count vowels
    textBox = document.getElementById('textBox'); //corrected spelling of   Element
    phrase = textBox.value;
    phrase = phrase.toLowerCase();  //switched to lower case
    vowelCount = 0;
    for(i = 0; i < phrase.length; i+= 1)  {
        letter = phrase[i];
        if (letter === 'a' ||  letter === 'e' || letter === 'i' || letter === 'o' ||  letter === 'u') { //fixed the spelling of letter. added another = in letter = 'e'
            vowelCount++;   
        }
    }

    alert(vowelCount + ' vowels');
    var outArea = document.getElementById('outputDiv'); //corrected to     outputDiv instead of outputId and put document. in front of the getElement
    outArea.innerHTML = vowelCount + ' vowels in ' + phrase;
}

function init(){
    alert('init vowels');
    var countTag = document.getElementById('countBtn'); //switched to semi-   colon and condensed to single line
    countTag.onclick = countVowels;
}

window.onload = init();

需要帮助调试元音计数JS

2 个答案: