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
– Imran Rafiq Rather, Commented Dec 30, 2020 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
– epascarello, Commented Dec 30, 2020 at 14:52
Because createCanvas is not defined in the "standard JS scope". Where do you take the function from? Maybe that helps: w3schools.com/jsref/dom_obj_canvas.asp — Simon van Endern
– Simon van Endern, Commented Dec 30, 2020 at 15:04

Hef · Accepted Answer · 2020-12-30 15:15:36Z

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, 2020 at 15:15

Hef

1,59016 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Conor Over a year ago

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.

Hef Over a year ago

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.

Conor Over a year ago

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?

Hef Over a year ago

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 to see the difference between setup() and draw()

Hef Over a year ago

Also, remember to add this to your body tag, inside your HTML code. <div id="canvas-wrapper"></div>

|

Collectives™ on Stack Overflow

JS file not correctly linked to HTML file

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related