Uncaught TypeError: Cannot read properties of undefined (reading 'parent')

Question

I was making a project using p5js and was looking to style buttons. I used this reference to use css https://p5js.org/reference/#/p5.Element/parent but was to do so. After adding the parent it always shows the error Uncaught TypeError: Cannot read properties of undefined (reading 'parent'). Can someone help me please.

var canvas
var bacimg;
var playbutton;
var infobutton
var gameState = 0
var t = "Empty";
var fighterjet,fighterjetimage
var opponent1,opponent1image;
var drone, drone_img
var score = 0;
var bullet, bullet_img;
var bullet_group
let npc_group;
let cloudx = 100;
let cloudy = 100;

window.addEventListener("keydown", function(e) {
  if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {
      e.preventDefault();
  }
}, false);

function preload(){

bacimg = loadImage("./images/BAC.jpg");
fighterjetimage = loadImage("./Images/Fighter Jet 1.png");
drone_img = loadImage("./Images/Drone.png");
bullet_img = loadImage("./Images/bullet1.png");

}

function setup() {
  createCanvas(1680,940);

  bacimg.resize(800,400);
  bullet_group = createGroup();
  npc_group = createGroup();
  //creating the play button to play the game
  playbutton = createButton("PLAY");
  playbutton.position(700,400);
  playbutton.size(200,50);
  //create 

  //creating the info button to show the information about who built the game.
  infobutton.parent("info")
  infobutton = createButton("INFO");
  infobutton.position(700,500);
  infobutton.size(200,50);
  //adding the fighter jet
  fighterjet = createSprite(800,825,50,50);
  fighterjet.addImage(fighterjetimage);
  fighterjet.scale = 0.4;
  fighterjet.visible = false;
}

function draw() {

  background(bacimg);  
    //add text to the top of the screen

  
  fill("red");
  textSize(50);
  textFont("Bungee Spice")
  text("Project étoile rouge", 500, 100);
  playbutton.mousePressed(PressPlayButton);
  infobutton.mousePressed(Pressbuttoninfo);
  if(gameState == 1){
    background("skyblue");
    makeCloud(cloudx, cloudy-50);
  makeCloud(cloudx + 100, cloudy + 100)
  cloudx+=1;
    fighterjet.visible = true;
    spawnDrones();
    bullethit(npc_group,bullet_group);
    //bullet should shoot only after 10 seconds
   // if(frameCount%10==0){
    if(keyWentDown("space")){
      shootBullet();
    }
    //}
    ScoreBoard();
     move();

  }
  
  if(t==="info text"){
  fill("red"); 
  textSize(50);
  textFont("Bungee Spice");
  text("Made By Aadit Kumar", 500, 500);
  }
  
  //text(mouseX + " , " + mouseY, mouseX,mouseY);
  drawSprites();
}

// create a function in which all the buttons will be hidden
function Pressbuttoninfo(){        
  playbutton.hide();
  infobutton.hide();
  t = "info text"
  // fill("red"); 
  // textSize(50);
  // text("Information", 660, 100);
  //create a button to go back to the main menu
  backbutton = createImg("./Images/back.png");
  backbutton.position(50,50);
  backbutton.size(50,50);
  backbutton.mousePressed(Pressbuttonback);

}

function Pressbuttonback(){ 
  playbutton.show();
  infobutton.show();
  backbutton.hide();
  t = "Empty";

}

function PressPlayButton(){
  gameState = 1;
  playbutton.hide();
  infobutton.hide();
}
function move(){
  
  if((keyIsDown(LEFT_ARROW) || keyDown("a")) && fighterjet.x > 25){
    fighterjet.x = fighterjet.x - 15;
  }
  if((keyIsDown(RIGHT_ARROW)|| keyDown("d"))&& fighterjet.x < 1590){
    fighterjet.x = fighterjet.x + 15;
  }
}

//create a game scoreboard on the right of the screen
function ScoreBoard(){ 
  fill("red");
  textSize(50);
  textFont("Nabla");
  text("Score: " + score, 1400, 100);
}
function shootBullet(){
  bullet= createSprite(150, width/2, 50,20)
  bullet.x= fighterjet.x
  bullet.y= fighterjet.y+10
  bullet.addImage(bullet_img)
  bullet.scale=0.12
  bullet.velocityY=- 7
  bullet_group.add(bullet)
}
//add a function to spawn the drones every 10 seconds at random positionson the x axis
function spawnDrones(){
  if(frameCount%50==0){
    drone = createSprite(100,100,2,2);
    drone.addImage(drone_img);
    drone.scale = 0.5;
    drone.visible = true;
    drone.velocityY = 3;
    drone.x = Math.round(random(100,1500));
    npc_group.add(drone);
  }
}
//add a function to destroy the drone that was hit by the bullet and increase the score by 1 point

function bullethit(npc_group,bullet_group){
  if(npc_group.isTouching(bullet_group)){
    npc_group.destroyEach();
    bullet_group.destroyEach();
    score = score + 1;
  }
}
  
function makeCloud(cloudx, cloudy) {
  fill(250)
  noStroke();
  ellipse(cloudx, cloudy, 70, 50);
  ellipse(cloudx + 10, cloudy + 10, 70, 50);
  ellipse(cloudx - 20, cloudy + 10, 70, 50);
}
//------------------------------------------------
// levels- adaptivity 
//Collect the sounds for your game and add them to the Sounds folder

   <script src="./JavaScript/sketch.js"></script>
      <div id="info"></div>

Answer 1

The problem, i guess, is in your setup function. Currenly your code:

//creating the info button to show the information about who built the game.
  infobutton.parent("info")
  infobutton = createButton("INFO");
  infobutton.position(700,500);
  infobutton.size(200,50);

You tried to access infobutton.parent before initialize the value for infobutton, so it lead to the error. Try to swap 2 first line:

infobutton = createButton("INFO");
infobutton.parent("info")