Cannot read property 'split' of undefined

p5.js Coding Questions
#1

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);

  }
 
  
}
#2

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

  button.mousePressed(gibberish);

with anonymous function

  button.mousePressed(function() {
    gibberish(box.value())
  });

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)

1 Like
#3

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.

#4

sorry can you be more precise about what you did and what happened? Doesn’t this work?
https://editor.p5js.org/micuat/sketches/4Z9AI2sZ_

#5

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).

#6

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.

#7

Actually it does; but it’s not a String. Instead it’s a MouseEvent object:
developer.Mozilla.org/en-US/docs/Web/API/MouseEvent

So if we log gibberish()'s parameter str we’ll have that confirmation:

function gibberish(str) {
  print(str); // MouseEvent {isTrusted: true, screenX: 674, screenY: 308, clientX: 674, clientY: 185, …}

  // ...
}
#8

Yes, this ended up working, thanks.

#9

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.

https://editor.p5js.org/micuat/sketches/8g0nAOeoW

1 Like
#10

Indeed you’re right! :flushed:

Just checked the sketch I’ve relied on and it was the global mousePressed() not the p5.Element 1. :woozy_face: