My loop function for my vowels counter in not working correctly and I don't know where I have gone wrong I would like some assistance with it.
I am trying to get the most used vowel to be bold so say I have A = 34 and E = 45
so E should be bold like this E
But I don't know whether I am missing some code or if I have got something wrong in my code.
This is my JavaScript.
function countVowels() {
var text = document.getElementById("text").value;
var arrayOfLetters = text.split("");
// These are the counters for the program to find the vowels.
var countA = text.match(/[Aa]/g).length;
var countE = text.match(/[Ee]/g).length;
var countI = text.match(/[Ii]/g).length;
var countO = text.match(/[Oo]/g).length;
var countU = text.match(/[Uu]/g).length;
var countComma = text.match(/[,.!": ;?)(]/g).length;
var bold = "<strong>";
var vowels = new Array();
vowels[0] = "countA";
vowels[1] = "countE";
vowels[2] = "countI";
vowels[3] = "countO";
vowels[4] = "countU";
for (var i = 0; i < vowels.length; i++) {
document.getElementById("result").innerHTML = i + vowels[i] + "<br />";
}
// This code will output the results.
document.getElementById("result").innerHTML = "";
document.getElementById("result").innerHTML += "Total Letters: " + arrayOfLetters.length + "<br />";
document.getElementById("result").innerHTML += "A's: " + countA + "<br />";
document.getElementById("result").innerHTML += "E's: " + countE + "<br />";
document.getElementById("result").innerHTML += "I's: " + countI + "<br />";
document.getElementById("result").innerHTML += "O's: " + countO + "<br />";
document.getElementById("result").innerHTML += "U's: " + countU + "<br />";
document.getElementById("result").innerHTML += "Punctuation: " + countComma + "<br />";
}
This is my HTML.
<div style="text-align: center;">
<h1> Vowel Counter </h1>
Please enter text for your vowel count:
<br>
<textarea id="text" rows="10" style="width: 100%;"></textarea>
<br>
<button onclick="countVowels();">Count Vowels</button>
<p id="result"></p>
And this is my fiddle .
var result = "";
for(var i = 0; i < text.length ; i++){
if(text[i] == vowelsmustusedUpCase || text[i] == vowelsmustusedLowCase ){
result += "<strong>"+text[i]+"</strong>";
} else {
result += text[i];
}
}
document.getElementById("text").value = result ;
add this, but in textarea you can't see the bold
Ok here's a code review/answer:
First I modified these lines:
var countA = text.match(/[Aa]/g).length;
To:
var countA = (text.match(/[Aa]/g) ? text.match(/[Aa]/g).length : 0);
As it returns " Uncaught TypeError: Cannot read property 'length' of null " if the vowel doesn't appear in the control. This will set's it to 0.
Next I simplified the array declaration to:
var vowels = ["countA", "countE", "countI", "countO", "countU"];
Then I removed this seciton, which does nothing as it's overwritten later:
// does nothing
// for (var i = 0; i < vowels.length; i++) {
// document.getElementById("result").innerHTML = i + vowels[i] + "<br />";
// }
Then I worked out the highest count using Math.max
:
var maxVal = Math.max(countA,countE,countI,countO,countU);
Then to make the value bold in the output, I created a function to compare values to the max value:
function formatValue(val, max) {
return (val === max) ? '<strong>' + val + '</strong>' : val;
}
So your final section would call this function to output the number like this:
document.getElementById("result").innerHTML += "A's: " + formatValue(countA,maxVal) + "<br />";
function countVowels() {
var text = document.getElementById("text").value;
var arrayOfLetters = text.split("");
// These are the counters for the program to find the vowels.
var countA = (text.match(/[Aa]/g) ? text.match(/[Aa]/g).length : 0);
var countE = (text.match(/[Ee]/g) ? text.match(/[Ee]/g).length : 0);
var countI = (text.match(/[Ii]/g) ? text.match(/[Ii]/g).length : 0);
var countO = (text.match(/[Oo]/g) ? text.match(/[Oo]/g).length : 0);
var countU = (text.match(/[Uu]/g) ? text.match(/[Uu]/g).length : 0);
var countComma = (text.match(/[,.!": ;?)(]/gi) ? text.match(/[,.!": ;?)(]/gi).length : 0);
var bold = "<strong>";
var vowels = ["countA", "countE", "countI", "countO", "countU"];
var maxVal = Math.max(countA,countE,countI,countO,countU);
// This code will output the results.
document.getElementById("result").innerHTML = "";
document.getElementById("result").innerHTML += "Total Letters: " + arrayOfLetters.length + "<br />";
document.getElementById("result").innerHTML += "A's: " + formatValue(countA,maxVal) + "<br />";
document.getElementById("result").innerHTML += "E's: " + formatValue(countE,maxVal) + "<br />";
document.getElementById("result").innerHTML += "I's: " + formatValue(countI,maxVal) + "<br />";
document.getElementById("result").innerHTML += "O's: " + formatValue(countO,maxVal) + "<br />";
document.getElementById("result").innerHTML += "U's: " + formatValue(countU,maxVal) + "<br />";
document.getElementById("result").innerHTML += "Punctuation: " + countComma + "<br />";
}
function formatValue(val, max) {
return (val === max) ? '<strong>' + val + '</strong>' : val;
}
I think you should first find which is the most used vowel, and then compare it with the result line in your output. Eg:
vowelCount = { A: countA, E: countE, I: countI, O:countO, U:countU };
// Find vowel with maximum appearances
var vowelMaxCount = -1;
var vowelMostPopular = -1;
for(vowel in vowelCount) {
if(vowelCount[vowel] > vowelMaxCount) {
vowelMaxCount = vowelCount[vowel];
vowelMostPopular = vowel;
}
}
// This code will output the results.
document.getElementById("result").innerHTML = "";
document.getElementById("result").innerHTML += "Total Letters: " + arrayOfLetters.length + "<br />";
for(vowel in vowelCount) {
v = (vowel == vowelMostPopular)?"<strong>"+vowel+"</strong>":vowel;
document.getElementById("result").innerHTML += v+"'s: " + vowelCount[vowel] + "<br />";
}
document.getElementById("result").innerHTML += "Punctuation: " + countComma + "<br />";
Demo fiddle: http://jsfiddle.net/lparcerisa/a8n947kw/1/
You seem to be getting the count right. So the only problems left I guess are:
I referred to this to get max count, and then some tweaks to your code to get the max count displayed in bold.
var vowels = new Array ();
vowels [0] = {"vowel" : "A", "count" : countA};
vowels [1] = {"vowel" : "E", "count" : countE};
vowels [2] = {"vowel" : "I", "count" : countI};
vowels [3] = {"vowel" : "O", "count" : countO};
vowels [4] = {"vowel" : "U", "count" : countU};
var maxCount = Math.max.apply(Math, vowels.map(function(o) {
return o.count;
}));
for (var i = 0; i < vowels.length; i++) {
document.getElementById("result").innerHTML += (vowels[i].count == maxCount? "<B>" : "") + vowels[i].vowel + "'s: " + vowels[i].count + "<br />";
}
See this updated fiddle .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.