The select() function is used to search an element in the page with the given id, class or tag name and return it as a p5.element. It has a syntax similar to the CSS selector. An optional parameter is available that can be used to search within a given element. This method only returns the first element if multiple elements exist on the page that matches the selector.
Note: The DOM node of the element can be accessed using the .elt property.
Syntax:
select(name, [container])
Parameters: This function accept two parameters as mentioned above and described below:
- name: It is a string which denotes the id, class or tag name of the element that has to be searched.
- container: It is an optional parameter which denotes an element to search.
Return Value: When the given element is successfully found, it returns a p5.element that contains the node. Otherwise, it returns null.
Below examples illustrates the select() function in p5.js:
Example 1:
function setup() { createCanvas(650, 50); textSize(20); text("Click the mouse to select the paragraph" + " element and change its position.", 0, 20); para1 = createP("This is paragraph 1"); para2 = createP("This is paragraph 2"); para3 = createP("This is paragraph 3"); } function mouseClicked() { // Select the first // paragraph element selectedP = select("p"); // Change position to 200, 20 selectedP.position(200, 20); } |
Output:
Example 2:
function setup() { createCanvas(650, 300); textSize(20); text("Click the mouse once to select the"+ " canvas and change its color.", 0, 20); } function mouseClicked() { // Select the first // canvas element selectedCanvas = select("canvas"); // Get the DOM node using .elt and // change background color to green selectedCanvas.elt.style.backgroundColor = "green"; } |
Output:
Online editor: https://editor.p5js.org/
Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Reference: https://p5js.org/reference/#/p5/select
