I do exactly as the library docs here.
I have an error
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'appendChild')
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles/index.css" />
<script src="libs/p5.min.js"></script>
<script src="scripts/barcode.js"></script>
</head>
<body>
<div class="container"></div>
</body>
</html>
Tried defer on the barcode script import, and putting it in the end.
barcode.js
function setup() {
let cnv = createCanvas(500, 500);
cnv.parent("container");
}
Tried this, nothing changed
async function setup() {
let cnv = await createCanvas(500, 500);
cnv.parent("container");
}
Thanks for your insight !
As the p5 documentation says:
The parent() function is used to attach the element as a parent element.
This function accepts either a string ID, DOM node, or p5.Element Add
So add an id to container div and pass it to parent instead of class fix the problem
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles/index.css" />
<script src="libs/p5.min.js"></script>
<script src="scripts/barcode.js"></script>
</head>
<body>
<div id="container"></div>
</body>
</html>