# Button not working as expected

**URL:** <https://discourse.processing.org/t/button-not-working-as-expected/24273>\
**Category:** Libraries\
**Created:** [October 1, 2020, 3:31pm UTC](https://discourse.processing.org/t/button-not-working-as-expected/24273 "2020-10-01T15:31:24Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![alsumwas](https://avatars.discourse-cdn.com/v4/letter/a/6f9a4e/32.png) [@alsumwas](https://discourse.processing.org/u/alsumwas)\
**Post date:** [October 1, 2020, 3:31pm UTC](https://discourse.processing.org/t/button-not-working-as-expected/24273/1 "2020-10-01T15:31:24Z")

</div>

The sketch below works fine in the p5.js web editor but when I export it and upload it to the server the buttons do not work properly. Button c and d are the colors I want them to be but a, b, e, and f are the default color. Is there something I am not seeing in the code?

\<var bgcolor;  
var abutton;  
var bbutton;  
var cbutton;  
var dbutton;  
var ebutton;  
var fbutton;

function preload () {  
bsong = loadSound(“[https://ia801401.us.archive.org/28/items/ME2020-09-15/magnolia2020-09-15d01t01.mp3](https://ia801401.us.archive.org/28/items/ME2020-09-15/magnolia2020-09-15d01t01.mp3)”);  
csong = loadSound(“[https://ia601402.us.archive.org/24/items/ds2020-09-24/02%20My%20Baby’s%20Coming%20Back%20To%20Me.mp3](https://ia601402.us.archive.org/24/items/ds2020-09-24/02%20My%20Baby%27s%20Coming%20Back%20To%20Me.mp3)”)  
}

function setup() {  
createCanvas(400, 400);  
bgcolor = color (200, 140, 160);

let acol = color(255, 213, 120, 100);

abutton = createButton (“Button A”);  
abutton.position(10, 10);  
abutton.mousePressed(changeColor);  
abutton.style(‘background-color’, acol);

let bcol = color(170, 123, 200, 100);

bbutton = createButton (“Button B”);  
bbutton.position(150, 10);  
bbutton.mousePressed(btogglePlaying);  
bbutton.style(‘background-color’, bcol);

let ccol = color(230, 210, 200, 100);

cbutton = createButton (“Button C”);  
cbutton.position(290, 10);  
cbutton.mousePressed(ctogglePlaying);  
cbutton.style(‘background-color’, ccol);

let dcol = color(240, 124, 160, 100)

dbutton = createButton (“Button D”);  
dbutton.position(10, 50);  
dbutton.mousePressed(changeColor);  
dbutton.style(‘background-color’, dcol);

let ecol = color(230, 224, 110, 100)

ebutton = createButton (“Button E”);  
ebutton.position(150, 50);  
ebutton.mousePressed(changeColor);  
ebutton.style(‘background-color’, ecol);

let fcol = color(160, 110, 160, 100)

fbutton = createButton (“Button F”);  
fbutton.position(290, 50);  
fbutton.mousePressed(changeColor);  
fbutton.style(‘background-color’, fcol);

}

function changeColor() {  
bgcolor = color(random(255), 140, 160);  
}

function btogglePlaying () {

if (bsong.isPlaying()) {  
bsong.stop();  
bbutton.html(“Button B”);  
}  
else {  
bsong.play();  
bbutton.html(“Stop”);  
}}

function ctogglePlaying () {

if (csong.isPlaying()) {  
csong.stop();  
cbutton.html(“Button C”);  
}  
else {  
csong.play();  
cbutton.html(“Stop”);  
}}

function draw() {  
background(bgcolor);

} \>