Thursday, July 4, 2024
HomeLanguagesJavascriptp5.js | value() Function

p5.js | value() Function

The value() function is an inbuilt function which is used to set or return the value of the element.
This function requires p5.dom library. So add the following line in the head section of the index.html file. 
 

javascript




<script language="javascript"
    type="text/javascript" src="path/to/p5.dom.js">
</script>


Syntax: 
 

value()

or 
 

value( value )

Parameters: This function accepts single parameter value which holds the value in number or string format.
Return Value: This function returns the value of the element.
Below examples illustrate the value() function in p5.js:
Example 1: This example uses value() function to display the value as output. 
 

javascript




// Gets the value
var input_val;
 
function setup() {
     
    // Canvas size 400*400
    createCanvas(400, 200);
     
    // Set background color
    background('green');
     
    // Create an input element with its value
    input_val = createInput('Welcome to neveropen'); 
   
    // Set the position of div element
    input_val.position(30, 80);
   
    // Set width of input field
    input_val.style('width', '250px');
   
    // Set font-size of input text
    input_val.style('font-size', '20px');
   
    // Set margin property
    input_val.style('margin-left', '50px');
}
 
function mousePressed() {
     
    // Display the input value
    print(input_val.value());
}


Output: 
 

Example 2: This example uses value() function to set the value of an element. 
 

javascript




// Set the input value
var input_val;
 
function setup() {
     
    // Canvas size 400*400
    createCanvas(400, 200);
     
    // Set background color
    background('green');
     
    // Create an input element with its value
    input_val = createInput('Welcome to neveropen'); 
   
    // Set the position of div element
    input_val.position(30, 80);
   
    // Set width of input field
    input_val.style('width', '250px');
   
    // Set font-size of input text
    input_val.style('font-size', '20px');
   
    // Set margin property
    input_val.style('margin-left', '50px');
}
 
function mousePressed() {
     
    // Change input value
    input_val.value('A computer science portal');
}


Output: 
 

  • Before Click on the Element: 
     

  • After Click on the Element: 
     

 

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!

Nicole Veronica Rubhabha
Nicole Veronica Rubhabha
A highly competent and organized individual DotNet developer with a track record of architecting and developing web client-server applications. Recognized as a personable, dedicated performer who demonstrates innovation, communication, and teamwork to ensure quality and timely project completion. Expertise in C#, ASP.Net, MVC, LINQ, EF 6, Web Services, SQL Server, MySql, Web development,
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments