charAt is not a function

Question

I'm trying to create a key mapping that keeps track of the frequency for each character of 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 Mozilla's developer website it should 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 with String.charAt(), but with Array.find().

The first argument to find is a callback, but the result of str.charAt(i) is a character and not a callback function.

To search for an element in your array, you could use Array.indexOf() as @adeneo already suggested in a 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