I am trying to create something which generates some gibberish from a box which the user inputs text and I keep getting the ‘cannot read property ‘split’ of undefined’ error when the mousePressed event fires. This error does not happen when I pass a string into the function I declared inside of draw. I tried iterating both over the array and the string in the for loop and neither worked. See below. Thanks.
function setup() {
createCanvas(windowWidth,windowHeight);
background(196, 170, 0);
let col=color(170, 127, 245);
let col2=color(97, 255, 139);
let col3=color(201, 172, 22);
let col4=color(132, 0, 255);
let col5=color(252, 249, 136);
let col6=color(255, 247, 0);
let size=300;
let box = createInput();
box.position(100,100);
box.style('background-color',col);
box.style('border-color',col2);
box.style('width',size+'px');
box.style('height',size+'px');
box.style('color',col6);
let button = createButton('Gibberish');
button.position(box.x + box.width,100);
button.style('background-color',col4);
button.style('color',col5);
//Doesn't work
button.mousePressed(gibberish);
}
function draw() {
//Works fine
gibberish('abcdefghijklmnop');
}
function gibberish(str){
let splitStr = str.split('');
let col = color(138, 106, 0);
let stringInit ='';
let a=width/2;
let b=height/2;
for(let i=0;i<splitStr.length;i++){
stringInit+=splitStr[i]+ 'y'+splitStr[splitStr.length-(i+1)];
stringInit.toLowerCase();
fill(col);
text(stringInit,a,b);
}
}