CharAt is not a function

Question

I'm trying to create a key mapping that tracks the frequency for each character in a string in my createArrayMap () function, but I keep getting this error from firebug: TypeError: str.charAt(...) is not a function

I found the charAt () function on the Mozilla developer website, it must be a function that exists.

var input;
var container;
var str;
var arrMapKey = [];
var arrMapValue = [];


function initDocElements() {

    container = document.getElementById("container");
    input = document.getElementById("inputbox");

}

function createArrayMap() {
    str = input.value;
    for (var i = 0; i < str.length; i++) {
        if (arrMapKey.find(str.charAt(i)) == undefined) {
            arrMapKey.push(str.charAt(i));
            arrMapValue.push(1);
        }
    }
}

function keyPressHandler() {
    createArrayMap();
    console.log(arrMapKey);
    console.log(arrMapValue);
}

function prepareEventHandlers() {
    input.onfocus = function() {
        if (this.value == "Start typing here!") {
            this.value = "";
        }
    };
    input.onblur = function() {
        if (this.value == "") {
            this.value = "Start typing here!";
        }
    };
    input.onkeyup = keyPressHandler;
}

window.onload = function() {
    initDocElements();
    prepareEventHandlers();
};

Answer 1

The problem is not String.charAt(), but with Array.find().

The first argument findis a callback, but the result str.charAt(i)is a symbol, not a callback function.

To find an element in your array, you can use Array.indexOf()as @adeneo already stated in the comment

function createArrayMap() {
    var str = input.value;
    for (var i = 0; i < str.length; i++) {
        if (arrMapKey.indexOf(str.charAt(i)) == -1) {
            arrMapKey.push(str.charAt(i));
            arrMapValue.push(1);
        }
    }
}

See JSFiddle

Answer 2

- ... , , , ?

var keyMap = {};
...
input.onkeyup = keyPressHandler;

function keyPressHandler(e) {
  var char = String.fromCharCode(e.keyCode);
  if(!(char in keyMap))
    keyMap[char] = 1;
  else
    keyMap[char]++;
}

Answer 3

, JSBIN LINK ( ).

, , , , .

Array.find(), , , , .

HTML:

<div id="container">
<textArea id="inputbox"></textArea></div>
<p id="output">output will show here</p>

JS:

var input,      // Global variables
    container,  //
    output;     //

/**
 * Initialize components
 */
function initDocElements() {
    container = document.getElementById("container");
    input = document.getElementById("inputbox");
    output = document.getElementById("output");
}

/**
 * Creates the letters frequency arrays.
 * Note that every time you click a letter, this is done from scratch.
 * Good side: no need to deal with "backspace"
 * Bad side: efficiency. Didn't try this with huge texts, but you get the point ...
 */
function createArrayMap() {
    var index,                  // obvious
        tempChar,               // temp vars for: char 
        tempStr = input.value,  // string
        len = tempStr.length,   // for loop iteration
        arrMapKey   = [],       // our keys
        arrMapValue = [];       // our values

    for (var i = 0 ; i <len ; i++) {

        // These 2 change each iteration
        tempChar = tempStr.charAt(i);
        index = arrMapKey.indexOf(tempChar); 

        // If key exists, increment value
        if ( index > -1) {          
            arrMapValue[index]++;
        }   
        // Otherwise, push to keys array, and push 1 to value array
        else {                      
            arrMapKey.push(tempChar);
            arrMapValue.push(1);
        }
    }

    // Some temp output added, instead of cluttering the console, to the 
    // a paragraph beneath the text area.
    output.innerHTML = "array keys:   "+arrMapKey.toString() + 
        "<br/>array values:"+arrMapValue.toString();
}

function keyPressHandler() {
    createArrayMap();

}

function prepareEventHandlers() {
    input.onfocus = function() {
        if (this.value == "Start typing here!") {
            this.value = "";
        }
    };
    input.onblur = function() {
        if (this.value === "") {
            this.value = "Start typing here!";
        }
    };
    input.onkeyup = keyPressHandler;
}

window.onload = function() {
    initDocElements();
    prepareEventHandlers();
};

BTW, , , , , char :

/**
 * Same as above method, using an object, instead of 2 arrays
 */
function createObject() {
    var index,                  // obvious
        tempChar,               // temp vars for: char 
        tempStr = input.value,  // string
        len = tempStr.length,   // for loop iteration
        freqObj = {};           // our frequency object

    for (var i = 0 ; i <len ; i++) {
        tempChar = tempStr.charAt(i);   // temp char value

        if (freqObj.hasOwnProperty(tempChar))
            freqObj[tempChar]++;
        else
            freqObj[tempChar] = 1;
    }
}