-1

I need to debug this segment of code for a class and I have fixed a number of things but I'm not sure why it doesnt work. It is supposed to count the number of vowels in the phrase and return them in the div element i believe. However it always returns "undefined vowels"

Here is the 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>

and here is my 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;

Here is a JSFiddle

royhowie
  • 11,075
  • 14
  • 50
  • 67
joeygmurf
  • 27
  • 1
  • 5
  • 1
    Do you know how to use the debugger in the JavaScript console? You will find the answer easily if you use it. Step through your `countVowels()` code line by line and look at the value of your `vowelCount` variable. Is it what you expect? – Michael Geary May 29 '15 at 17:55
  • 1
    If you don't know how to use a JavaScript debugger, it's easy to find out. For example, if you use Chrome, here is some information about the [Chrome DevTools](https://developer.chrome.com/devtools). Look for the debugger section there and try it out. – Michael Geary May 29 '15 at 17:57
  • Here's a nice JSFiddle for ya: http://jsfiddle.net/acjy656v/ – Kivak Wolf May 29 '15 at 18:01
  • You have to **call** `toLowerCase`, as in `toLowerCase()`. –  May 29 '15 at 18:08

2 Answers2

1

You can also use RegExp for slimmer code: 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);
});

Here's a more algorithmic solution. And, yes it defines a function on the prototype and those who are opposed to that practice can rewrite the function imperatively.

Plain 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());
DRD
  • 5,557
  • 14
  • 14
  • Nice easy to read clean solution which will be easier to maintain and debug in the future. Only problem is the OP didn't mention he was using jQuery. – zgood May 29 '15 at 18:11
  • @zgood: See my updated post for an algorithmic solution. Besides, the crooks of the first "algorithm" is usage of RegExp, which is available through JavaScript directly regardless of whether you use jQuery or access DOM through browser-native methods. – DRD May 29 '15 at 18:19
  • Yes, I understand. But now it is more helpful, and a good answer is now a great answer lol – zgood May 30 '15 at 01:42
0

The first thing you need to do is make sure you're initializing your init() function on window load. Change window.onload = init; to window.onload = init().

Next, change your double-equals to a triple-equals. It's generally good practice to do so:

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

Then, to get your counter working, you need to call toLowerCase() in phrase = phrase.toLowerCase. It should look like this: phrase = phrase.toLowerCase()

Here is your fixed JS code:

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();
Community
  • 1
  • 1
Richard Kho
  • 5,086
  • 4
  • 21
  • 35