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);
}
}
First you should try to console.log everything that is suspicious. I printed str in the function and it was undefined. It seems mousePressed does not pass any argument, but binds the element to this. However, in your case this will be button so you cannot access the value that way. I would replace
to pass the value explicitly (by the way, you need to call value function to access the value inside box). And one last thing, you should avoid using the name box as it’s reserved by p5.js (in WEBGL - in this case it’s irrelevant but it’s a good practice to make sure names don’t overlap)
Interestingly, I get just blankness when I include console.log, as well as the function not being defined within the anonymous function, despite the gibberish being declared where it should be accessible globally.
Okay. I see what I did the second time around. It was a silly spelling error. I had meant earlier passing the string into console.log() as you had described (I think I had written too hastily).
I see! I hope it helped. And when the output of console.log is empty - you have to observe it carefully. If, in the console, no attempt was made to print anything, that means that console.log was not executed and that block was somehow skipped. If you see undefined then the value is undefined (in this case). If it’s null, that’s another case.
From this observation you can understand that mousePressed actually doesn’t pass any arguments. And that’s why I used box.value() to explicitly input from the textbox element.
I double checked but that’s not true. In fact, MouseEvent is only passed in mousePressed overload and not in the event callback functions, which is actually quite strange.
