variable input becoming nullified and breaking .charAt[]

Question

https://jsfiddle.net/2L4t9saq/180/ is my fiddle

most of the code is just useless, ill just post the stuff that matters

var baseConverter = function(r, e, n) {
  var o = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  if (e <= 0 || e > o.length || n <= 0 || n > o.length) return console.log("Base unallowed"), null;
  var l, t = 0;
  if (10 != e) {
    var a = r.length;
    for (l = 0; l < a; l++) {
      var u, f = -1;
      for (u = 0; u < o.length; u++)
        if (r[l] == o[u]) {
          f = 1;
          break
        }
      if (u >= e) return console.log("Symbol unallowed in baseform"), null;
      if (-1 == f) return console.log("Symbol not found"), null;
      var s = a - l - 1;
      t += 0 == s ? u : u * Math.pow(e, s)
    }
  } else t = parseInt(r);
  if (10 != n) {
    for (var g = []; t > 0;) {
      var i = t % n;
      if (i < 0 || i >= o.length) return console.log("Out of bounds error"), null;
      g.push(o[i]), t = parseInt(t / n)
    }
    return g.reverse().toString().replace(/,/g, "")
  }
  return t.toString()
}

var b36torgba = function(input) {
  for (var i = 1; i < (input.length / 8) + 1; i++) {
    var arr = input
    var r = arr.charAt[0 + (i - 1) * 8] + "" + arr.charAt[1 + (i - 1) * 8]
    var g = arr.charAt[2 + (i - 1) * 8] + "" + arr.charAt[3 + (i - 1) * 8]
    console.log(g.charAt[2])
    var b = arr.charAt[4 + (i - 1) * 8] + "" + arr.charAt[5 + (i - 1) * 8]
    console.log(b)
    var a = arr.charAt[6 + (i - 1) * 8] + "" + arr.charAt[7 + (i - 1) * 8]
    console.log(a)
    var rrgba = baseConverter(r, 36, 10)
    var grgba = baseConverter(r, 36, 10)
    var brgba = baseConverter(r, 36, 10)
    var argba = baseConverter(r, 36, 10)
    var bigMessOfAVariable = "rgba(" + rrgba + "," + grgba + "," + brgba + "," + argba + "),"
    return bigMessOfAVariable;
  }
}

you can ignore the top function, all it is is a base converter script, that takes in three inputs, an input, the base its in, and the base it should be converted to: eg baseConverter(73,36,10) will output 255.

now, the problem is with my b36torgba function. it will take in a string, which is guaranteed to have a length that is either 0, 8, or a multiple of 8, this is just standardization to make sure everything runs smoothly, without having 700 indexOf[] functions.

it takes in the input, and divides it by 8, this tells the function how many bytes it has to go through, and how many it will spit out, so a string "[7300002S7300002S]" should (divided by 8) output 2, therefore the script runs 2 iterations.

currently, it should be taking in the string, and assigning each group of 2 characters (again standard) to a specific variable, this will allow it to all be put in the end and outputted as the same string but in base 10 rgba (hence 73 being use, 73 in base 36 is 255), but before it can do any of that, it breaks when it tries to find the characters in a string, saying this syntax error:

Uncaught TypeError: Cannot read property '0' of undefined

at b36torgba ((index):40)

at window.onload ((index):55)

why does it break as soon as it tries to feed the string into my charAt()'s?

ps: i do understand that the code in its current state, if it worked, it'd only output the rgba value of the last 8 characters

Answer 1

Easy mistake. You're using charAt (which is a function) by doing charAt[index] (using square brackets), rather than charAt(index) (using round brackets). Fixing that up should solve your issue.

Also - you're calling the function by doing b36torgba(["7300002S7300002S"]) in your JSFiddle, and trying to do string manipulation on it. Since ["7300002S7300002S"] is an array, not a string, .charAt() won't work on it. Try calling the function by doing b36torgba("7300002S7300002S") instead.