Defining a global function (to use with on_load)

[jan-tu-dresden]

Hey, I want to call a function with on_load for several trials like this

function do_stuff(selector){
	let object = document.getElementById("xy");
	let object2 = object.querySelectorAll(selector);
	...
}
var trial = {
	type: jsPsychSurveyHtmlForm,
	...
	on_load: do_stuff("select")
}

If I write the function after on_load intead of calling it, everything works. However, as I want to reuse the function without having to duplicate it everytime I thought I could just define it globally and then use it in trial, trial2, etc., but this way I get an error that the object is null. How is it possible to define the function outside of the trial?

[becky-gilbert]

Hi @jan-tu-dresden, I think the problem is that the on_load parameter is itself a function that doesn't take any arguments. So if you want to use a function that does take arguments, I think you'll need to wrap it in an anonymous function like this:

on_load: function() {
  do_stuff("select");
}

Does that work for you?

[jodeleeuw]

Another option would be to have your do_stuff function return a function, which accomplishes the same thing that @becky-gilbert is suggesting, but might save some keystrokes depending on how frequently you use it:

function do_stuff(selector){
	return () => {
		let object = document.getElementById("xy");
		let object2 = object.querySelectorAll(selector);
		...
	}
}
var trial = {
	type: jsPsychSurveyHtmlForm,
	...
	on_load: do_stuff("select")
}

[becky-gilbert]

Oooh, thanks Josh! I like this better 😄

[jan-tu-dresden]

@jodeleeuw works perfectly, thank you very much.