# Mouse interactions stop working on published page

**URL:** <https://discourse.processing.org/t/mouse-interactions-stop-working-on-published-page/43506>\
**Category:** Coding Questions\
**Created:** [December 18, 2023, 8:42pm UTC](https://discourse.processing.org/t/mouse-interactions-stop-working-on-published-page/43506 "2023-12-18T20:42:41Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![holby](https://avatars.discourse-cdn.com/v4/letter/h/d6d6ee/32.png) [@holby](https://discourse.processing.org/u/holby)\
**Post date:** [December 18, 2023, 8:42pm UTC](https://discourse.processing.org/t/mouse-interactions-stop-working-on-published-page/43506/1 "2023-12-18T20:42:41Z")

</div>

Hello

When I publish my sketch to a folder on my webhost, the mouse interactions stop functioning (they work in the editor):

[https://north-berlin.com/p5/](https://north-berlin.com/p5/)

Can anyone see anything wrong here with this code?

Thanks!

```auto
var tag;
let tagamount = 0;
let count = 0;
var buttons =[];
var newButtons=[];
var r;
var g;
var b;
var _seed;

function setup(){
  createCanvas(windowWidth,windowHeight);
  background(0);
  _seed = random(0,100);
  textFont('Garamond');

  var data = loadJSON('https://north-berlin.com/wp-json/wp/v2/tags/?per_page=100', gotData);
}

function buttonObj(_name,_link){
//Object that stores all the tag data.
//Primarily Necessary for managing Hover/Click events.
    this.name = _name;
    this.link = _link;
    this.x = random(100,width-120);
    this.y = random(100, height-120)
    this.rotateSeed = random(-45,45);
    this.textSize = random(2,30)
    this.textWidth = textWidth(this.name) * 1.5;

    this.draw = function(){
    //Draw loop
    translate(this.x, this.y );
    rotate(radians(this.rotateSeed));
    //textSize(this.textSize);

    text(_name,0,0);
    }

    this.hover = function(){
    //Hover Listener
    //Fill defaults to white on Hover
    if(mouseX > this.x - this.textWidth/2 && mouseX < this.x+this.textWidth/2 && mouseY > this.y - this.textSize/2 && mouseY < this.y +this.textSize/2){
    fill("#FFFFFF");
    }

    }

    this.clickCheck = function(){
    //Click Listener
    if(mouseX > this.x - this.textWidth/2 && mouseX < this.x+this.textWidth/2 && mouseY > this.y - this.textSize/2 && mouseY < this.y +this.textSize/2){
    print(this.name);
    window.location.href = this.link;
    }

    }
}

function gotData(data) {
//JSON Fetch/loading Call back
    tag = data;
    tagamount = Object.keys(tag).length;
    for(i = 0; i<tagamount;i++){
_b = new buttonObj(tag[i]["name"], tag[i]["link"]);
buttons.push(_b);
    }
}

function draw() {
  background(0);
  randomSeed(_seed);
  for (let i = 0; i < tagamount; i++) {
  r = random(0, 255);
    g = random(0, 255);
    b = random(0, 255);
   
    textAlign(CENTER,CENTER);
    rectMode(CENTER);

    push();
     textSize(tag[i]["count"] * 20);
   buttons[i].hover();
   buttons[i].draw();
    pop();
   
    fill(r, g, b);
  }
}

function windowResized(){
  resizeCanvas(windowWidth, windowHeight);
}

function mouseClicked(){
//Global Mouse Listener
print("X: " + mouseX + " Y: " + mouseY);
for(j = 0;j < buttons.length;j++){
buttons[j].clickCheck();
}
}

```

---

<div class="post-metadata">

**Author:** ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)\
**Post date:** [December 20, 2023, 4:04pm UTC](https://discourse.processing.org/t/mouse-interactions-stop-working-on-published-page/43506/2 "2023-12-20T16:04:06Z")

</div>

It looks like you made some changes to your project between the version posted above and the version on your self-hosted page, like moving some of the code to a separate `functions.js` file. Is it possible you made other changes to your code that broke functionality?

Also, you should make sure that the order of script tags in your HTML file is correct, meaning: if the code in file A is being used in file B, then file A should be imported above file B.