nick34992
4/20/2016 - 5:00 AM

change-class.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8/>

<!-- 
Based on code featured in one of Shiffman's video tutorials.
--> 

<!-- change path to suit -->
<script src="/express/p5js/p5.js"></script>
<script src="/express/p5js/p5.dom.js"></script>

<style>

.apple{
font-size: 24pt;
color: #fff;
padding: 24pt;
background-color: #f00;
}

.blueberry{
font-size: 12pt;
color: #fff;
padding: 12pt;
background-color: #00f;
}

</style>

<script>

function setup(){
  for (var i = 0; i < 10; i++){
    var p = createA('#', 'large-red');
    var x = floor(random(windowWidth));
    var y = floor(random(windowHeight));
    p.position(x, y);
    p.class('apple');
    createP('click on small-blue link to change small-blue class style to large-red class style');
  }
  for (var i = 0; i < 10; i++){
    var p = createA('#', 'small-blue');
    var x = floor(random(windowWidth));
    var y = floor(random(windowHeight));
    p.position(x,y);
    p.class('blueberry');
    p.mousePressed(becomeApple);
  }
}

function becomeApple(){
  this.removeClass('blueberry');
  this.class('apple');
}

</script>

</head><body> </body></html>