Open In App

p5.js selectAll() Function

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The selectAll() function is used to search for elements with the given id, class or tag name and return it as a p5.Element array. 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 returns all the elements that exist on the page and matches the selector.

Syntax:

selectAll(name, [container])

Parameters: This function accept two parameters as mentioned above and described below:

  • name: This is a string which denotes the id, class or tag name of the element that has to be searched.
  • container: This is an optional parameter which denotes an element to search within.

Returns: It returns a p5.Element array that contains all the matched elements.

Below example illustrates the selectAll() function in p5.js:

Example:




function setup() {
  createCanvas(600, 50);
  textSize(20);
  text("Click to select the paragraphs"+
       " and change their position.", 0, 20);
  
  para1 = createP("This is paragraph 1");
  para2 = createP("This is paragraph 2");
  para3 = createP("This is paragraph 3");
}
  
function mouseClicked() {
  
  // Select all the
  // paragraph elements
  selectedParas = selectAll("p");
  
  // Loop through each of them
  for (i = 0; i < selectedParas.length; i++) {
  
    // Change the position of
    // of the elements
    selectedParas[i].position(100, 100 + i * 25);
  }
}


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/selectall


Last Updated : 16 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads