JS file not correctly linked to HTML file

Question

At a complete loss here for what I assume is a very simple problem, thanks for the help in advance.

I have a HTML doc;

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Sketch</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel="stylesheet" href="style.css">  
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="main.js"></script>
    <script src="https://use.fontawesome.com/1f87fe0ccc.js"></script>
</head>

and here is my main.js file

function _(selector) {
    return document.querySelector(selector);
}
function setup() {
    const canvas = createCanvas(650, 600);
    canvas.parent("canvas-wrapper");
    background = color(255);
}

This should be creating a white canvas on my webpage but nothing is happening and Im concerned I have linked the file incorrectly.

Try checking whether the javascript path is correct first. By doing a console.log() in your js file — Imran Rafiq Rather, Dec 30 '20 at 14:51
Did you call the function and are there errors in the developer console or is there a 404 in the network panel? — epascarello, Dec 30 '20 at 14:52
js file is in same folder as html yes, main.js is showing up when i do console.log() silly question how would I go about calling the function, i was under the impression the function would be auto-executed when i load the webpage — Conor, Dec 30 '20 at 14:54
when i call the function i get the following in console ``` Uncaught ReferenceError: createCanvas is not defined setup file:///C:/Users/conor/Desktop/paint app/main.js:8 file:///C:/Users/conor/Desktop/paint app/main.js:13 ``` — Conor, Dec 30 '20 at 14:57
Because `createCanvas` is not defined in the "standard JS scope". Where do you take the function from? Maybe that helps: https://www.w3schools.com/jsref/dom_obj_canvas.asp — Simon van Endern, Dec 30 '20 at 15:04

score 1 · Accepted Answer · answered Dec 30 '20 at 15:15

1

There are several errors with your code. First off, you need to call all the functions that are supposed to run some code: This is how you do it: function_name(). The second thing you do is to define the function createCanvas, This function name looks similar to the P5JS library's createCanvas function, so I'm assuming that you are trying to use P5JS. Add this to your head tag: <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js"></script>

For more information please visit P5JS Library

answered Dec 30 '20 at 15:15

Hef

606
6
16

Thanks for the response, did some readin up on P5JS and it is the library Im using, I've added in the script for it but Im still getting createCanvas is not defined and the js code isnt working how its supposed to. – Conor Dec 30 '20 at 15:41
make sure to put the script tag that links to your "main.js" under the body tag, and not inside the head section. Let me know, if this fixes the problem. – Hef Dec 30 '20 at 20:15
this doesnt work unfortunately, no change. I have a link to font awesome script in my head tag as well underneath the link to P5JS, should I move this one too? – Conor Dec 31 '20 at 16:54
Don't change anything else. You have to move your javascript code into a function called `setup`. This is how p5.js works. For more information please visit [p5.js createCanvas not defined error. Uncaught ReferenceError](https://stackoverflow.com/questions/27694616/p5-js-createcanvas-not-defined-error-uncaught-referenceerror) – Hef Dec 31 '20 at 17:18
my js code is in a function called setup haha! – Conor Dec 31 '20 at 17:29
1

The way you set the background is wrong, You have to move the background to draw function. This code worked for me. `function _(selector) { return document.querySelector(selector); } function setup() { let canvas = createCanvas(400, 400); canvas.parent("canvas-wrapper"); } function draw() { background(220) }` For more information please visit [P5JS get started](https://p5js.org/get-started/) to see the difference between `setup()` and `draw()` – Hef Dec 31 '20 at 18:07
1

Also, remember to add this to your body tag, inside your HTML code. `
` – Hef Dec 31 '20 at 18:08

JS file not correctly linked to HTML file

1 Answers1