需要帮助调试元音计数JS [重复]答案

【问题标题】：Need help debugging vowel counting JS [duplicate]需要帮助调试元音计数JS [重复]
【发布时间】：2015-05-29 17:51:58
【问题描述】：

我需要为一个类调试这段代码，我已经修复了一些问题，但我不确定它为什么不起作用。它应该计算短语中元音的数量并将它们返回到我相信的 div 元素中。但是它总是返回“未定义的元音”

这里是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

【问题讨论】：

你知道如何在 JavaScript 控制台中使用调试器吗？如果你使用它，你会很容易找到答案。逐行遍历countVowels() 代码并查看vowelCount 变量的值。是你所期望的吗？
如果您不知道如何使用 JavaScript 调试器，很容易找到。例如，如果您使用 Chrome，这里有一些关于 Chrome DevTools 的信息。在那里寻找调试器部分并尝试一下。
这是一个不错的 JSFiddle：jsfiddle.net/acjy656v
您必须致电 toLowerCase，如toLowerCase()。

标签： javascript html debugging

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

【讨论】：

不错的易于阅读的干净解决方案，将来更易于维护和调试。唯一的问题是 OP 没有提到他正在使用 jQuery。
@zgood：请参阅我更新的帖子以获取算法解决方案。此外，第一个“算法”的骗子是使用RegExp，无论您是使用jQuery还是通过浏览器原生方法访问DOM，都可以直接通过JavaScript使用。
是的，我明白了。但现在它更有帮助，一个好的答案现在是一个很好的答案lol

【解决方案2】：

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

接下来，将双等号改为三等号。一般是good practice这样做：

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

然后，要让您的柜台正常工作，您需要在phrase = phrase.toLowerCase 中致电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();

【讨论】：

试过了，我得到了 Uncaught TypeError: Cannot set property 'onclick' of null for line 22。
这是我的 JSFiddle 你的问题：jsfiddle.net/m7zLsosb