Skip to content
Related Articles

Related Articles

p5.js | selectAll() Function

View Discussion
Improve Article
Save Article
  • Last Updated : 29 Jan, 2020
View Discussion
Improve Article
Save Article

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!