The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Checking accuracy of a textarea [RESOLVED]

  • # April 30, 2009 at 2:18 am

    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:


    Accuracy Test

    Well, hello there!

    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?

    # April 30, 2009 at 8:56 pm

    This reply has been reported for inappropriate content.

    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.


    Accuracy Test

    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;
    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 + "%";


    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….

    # May 3, 2009 at 9:27 am

    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.


    var str = ‘1 2 3’;

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

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

# May 3, 2009 at 4:24 pm

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!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed