p5Element.value discrepancy from Reference

p5.js Beginners
1

Acording to p5 reference, if you want to get the value of an HTML input element you created with foo=createInput(“”), you can get it with bar=foo.value.

But when checking value that way, I’m getting a js function.

I can get the input value by foo.elt.value instead.

Check this snippet I just ran on OpenProcessing.org :

let strFrase;
let estado;
let pedirFrase; /* div para preguntar frase */
let frase; /* input que pregunta la frase */

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
	estado=0;
	strFrase="";
   createDivs();
	
}

function draw() {
	background(200);
	circle(mouseX, mouseY, 20);
	switch(estado){
		case 0:
/* Ask for a phrase */
			pedirFrase.visible=true;
			pedirFrase.position(10,10);
			break;
		case 1:
			pedirFrase.visible=false;
/* Show the phrase. This does not work. */
/* (strFrase=frase.value) */
/* But look at your console */

			text(strFrase,10,10);
/* This would work: */
// text(frase.elt.value,10,10);
			break;
		case 2:
			break;
		case 3:
			break;
	}
}

function createDivs(){
	pedirFrase=createDiv("");
	pedirFrase.child(createElement("H1","Escriba su frase u oración:"));
	frase=createInput("","text");
	frase.attribute("placeholder","Escriba una frase");
	frase.name="Frase";
	frase.id="Frase";
	frase.changed(nuevaFrase);
	label=createElement("label","Frase:"); 
	label.attribute("for","Frase");
	pedirFrase.child(label);
	pedirFrase.child(frase);
	
}

/**** LOOK HERE ****/
function nuevaFrase(){
   /*** This returns the processing function used 
        to read an element's value ***/

	console.log("frase.value: "+frase.value);
   /*** The following line returns the right value, instead: ***/
	console.log("frase.elt.value: "+frase.elt.value);
	strFrase=frase.value;
	pedirFrase.visible=false;
	estado=1;
}
2

Hi! On the reference page here value it describes value as a function, not a property:

Calling myElement.value() returns the element’s current value.

So if you say foo = createInput(''), you would use bar = foo.value().