Forums

brianatlarge

As you can tell by my many questions lately, I've been playing with javascript a lot.

The purpose of this script is to come up with a percentage of accuracy by looking at what you typed and comparing it to the original text. Take a look:

<html>
<head>
<title>Accuracy Test</title>
<script type=\"text/javascript\">
function checkAcc() {
	var fieldTextWordCount = 0;
	
	var mainWords = new Array(document.getElementById.(\"bodyText\").innerHTML.split(\" \")); 
	var customWords = new Array(document.getElementById.(\"customWords\").value.split(\" \")); 
	
	var bodyTextWordCount = mainWords.length; 
	
	for (i=0; i<bodyTextWordCount; i++) {
		if(mainWords[i] == customWords[i]) { 
			 fieldTextWordCount  += 1;
			}
		}
	var accuracy = (fieldTextWordCount * 100) / bodyTextWordCount;
	document.getElementById(\"accuracy\").innerHTML=\"Your accuracy was \" + accuracy + \"%\";
}
	
</script>
</head>
<body>

<div id=\"bodyText\">Well, hello there!</div>
<textarea id=\"customWords\"></textarea>
<button onclick=\"checkAcc()\">How did I do?</button>
<div id=\"accuracy\"></div>

</body>
</html>

What's happening is after you type in your stuff and click on "How did I do?", the following happens:

1) An array is created by filling in the indexes with the words of bodyText.
2) Another array is created by filling in the indexes with the words of customWords.
3) I created a variable consisting of how many words are in the passage of bodyText.
4) For every word in the passage of bodyText, each word is checked with the corresponding word of customWords textarea. If a word matches, then fieldTextWordCount is incremented by 1.
5) Accuracy is then determended by multiplying however many words of customWords matched with bodyText by 100, then dividing by however many words are in bodyText.
6) Accuracy is outputted to the accuracy div.

Unfortunately, after thinking all this out, it just doesn't work. Anyone see anything wrong with it?

brianatlarge

So, with further toying around with it, I changed a couple things and got a little further. Still not doing what it's supposed to though.

<html>
<head>
<title>Accuracy Test</title>
<script language=\"javascript\" type=\"text/javascript\">
function checkAcc() {
	var fieldTextWordCount = 0;
	
	var mainWords = new Array(document.getElementById(\"bodyText\").value.split(\" \")); 
	var customWords = new Array(document.getElementById(\"customWords\").value.split(\" \")); 
	
	var bodyTextWordCount = mainWords.length; 
	alert(bodyTextWordCount);
	for (i=0; i<bodyTextWordCount; i++) {
		if(mainWords[i] == customWords[i]) { // if the word x in mainWords matches word x in customWords, then add 1 to fieldTextWordCount
			 fieldTextWordCount  += 1;
			}
		}

	var accuracy = (fieldTextWordCount * 100) / bodyTextWordCount;

	document.getElementById(\"accuracy\").innerHTML=\"Your accuracy was \" + accuracy + \"%\";
	
}
	
</script>
</head>
<body>

<textarea id=\"bodyText\">Well, hello there!</textarea>
<textarea id=\"customWords\"></textarea>
<button onClick=\"checkAcc();\">How did I do?</button>
<div id=\"accuracy\"></div>

</body>
</html>

First I changed the bodyText div to a textarea, then changed the mainWords array to use value instead of innerHTML.

I believe that the problem lies in var bodyTextWordCount = mainWords.length; because immediately after that, I have an alert to display the value of bodyTextWordCount. The value SHOULD be 3, but it says 1.

I believe I'm using the length method correctly, but it's just not working right....

James

Hi Brian,

I messed around a little bit and managed to solve your problem; here's a working function:


function checkAcc() {
   
   var fieldTextWordCount = 0,
       mainWords = document.getElementById(\"bodyText\").value.split(\" \"),
       customWords = document.getElementById(\"customWords\").value.split(\" \"),
       bodyTextWordCount = mainWords.length;
   
   for ( var i = 0; i < bodyTextWordCount; i++ ) {
      if(mainWords[i] == customWords[i]) { 
          fieldTextWordCount++;
      }
   }
   
   var accuracy = (fieldTextWordCount * 100) / bodyTextWordCount;
   
   document.getElementById(\"accuracy\").innerHTML = \"Your accuracy was \" + accuracy + \"%\";
  
}

The main problem was that you were trying to create an array out of an already existing array. Running the 'split' method on a string returns an array so there was no need to call the Array constructor on top of that.

I.e.


var str = '1 2 3';

// Wrong:
new Array(str.split(' ')); // Returns [ [1,2,3] ]

// Right:
str.split(' '); // Return [1,2,3]

brianatlarge

Thanks so much!!!

I saw the split() method on the w3c schools site, but I guess it didn't make it clear enough that it made the array for you. This works perfectly now!

treehouse : what would you like to learn today?

Forums

Checking accuracy of a textarea [RESOLVED]