Mouse interactions stop working on published page

p5.js Coding Questions
1

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/

Can anyone see anything wrong here with this code?

Thanks!

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();
}
}
2

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.