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.
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
Related
I have a JS file that exports some functions. I need one of those in the download attribute of the HTML body tag. How do I import the JavaScript function into the inline HTML?
I tried the following:
JS file
export function initPage() { ... }
HTML file
<script type="module" src="js/script.js"></script>
<body onload="initPage()">
But I get this error message:
Uncaught ReferenceError: initPage is not defined
I've found a Stackoverflow question but lost the URL to it. If someone knows which question I mean, please share the link and I'll delete this question
Thank you!
You could try following:
{...}
<body>
{...}
<!-- End of the body -->
<script type="module">
import {initPage} from '...';
document.addEventListener('DOMContentLoaded', function(event) {
initPage();
});
</script>
</body>
Basically the event listener DOMContentLoaded might be a modern way of solving your problem.
I've found a solution which is very easy, not quite exact that what I wanted but it works:
<script type="module">
import {initPage} from "./js/file.js";
document.querySelector("body").onload = function () { initPage(); } ;
</script>
Now the <script>-Tags with a src attribute aren't necessary anymore.
I did some tries and what seemed to work for me was to remove type="module" from the script tag and the export from the js function
Edit: What I meant was something like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/js/script.js"></script>
</head>
<body onload="initPage()">
</body>
</html>
and
function initPage() {
console.log('hupp');
}
I've been having a lot of trouble using this code from codemyui.com, and I'm not completely sure what to do.
src: https://gist.github.com/CodeMyUI/0ba729244a906a978b20d836c6b5d268
I copied the code for the javascript, html, and css file exactly, so there's no problems there. The main thing I think I messed up on was referencing javascript and the links to cloudflare / jquery. Here are the exact things I put.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial=scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="syle.css">
<title>Experimental Website</title>
</head>
And then, at the end of the body, I put in this code.
<script type="text/javascript" src="script.js"></script>
I'm a bit new to coding so if anyone knows the answer thanks!
I'm just starting on JavaScript and I'm following along this online course where it claims that if I insert <script> tags at the bottom of the page just before the <body> closing tag I should be able to see the website render first followed by the JavaScript code, but it is actually executing the other way around, the JavaScript code executes first and it's not until after I click "OK" on the message popping up that I'm able to see the website fully rendered.
Here is the code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>JavaScript Basics</title>
</head>
<body>
<div class="container">
<h1>Where to place your JavaScript code.</h1>
</div>
<script src="scripts.js"></script>
</body>
</html>
scripts.js
alert("This text should appear after page is fully rendered");
I honestly don't know if this is how the code is supposed to work. Do alert(); scripts always execute first? Maybe the browser has something to do with it? (I'm using the latest version of Chrome). Anyhow, a well explained answer of what's happening would be much appreciated.
Personally, I would do something more like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>JavaScript Basics</title>
</head>
<body>
<div class="container">
<h1>Where to place your JavaScript code.</h1>
</div>
<script>
window.onload = function() {
alert('This should now load after the page.');
}
</script>
</body>
</html>
The window.onload = fun... says "wait until the page has finished loading". Depending on what the browsers decide to (with images, layout, plugins etc.), this may or may not work for you.
Or even something like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>JavaScript Basics</title>
</head>
<body>
<div class="container">
<h1>Where to place your JavaScript code.</h1>
</div>
<script async defer src="scripts.js"></script>
</body>
</html>
With this example, the async attribute means "grab this script file in the background" and the defer means "wait until the page has loaded to execute it".
This question already has answers here:
Uncaught ReferenceError: $ is not defined?
(40 answers)
How to fix '$' was used before it was defined in both jslint and jshint using coding?
(2 answers)
Closed 8 years ago.
This is my first time trying to use JQuery and I was trying to add an event when the document is ready, but every time it says:
"$ was used before defined".
I don't know how to solve it. I tried different solutions on the internet but couldn't find any. Don't really know what I am doing wrong.
I referenced the HTML file to the js file like this
<!DOCTYPE html>
<html>
<head>
<title>Experimenting with Javascript</title>
<script type="text/javascript" src="script.js"></script>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
and this is my script
$(document).ready(function () {
"use strict";
$('div').mouseenter(function () {
$(this).animate({
height: '+=10px'
});
});
});
Reference the JQuery library in your page, like this
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
Include this tag above the script tag of your js file
Add JQuery library (http://jquery.com/)
Adding a event on every div in your app - rethink this. Add a class or something, and add it to a single element container, or a body, but don't add it to most common element.
You should organize your HTML DOM like that :
<!DOCTYPE html>
<html lang="en" class="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Experimenting with Javascript</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
</body>
1.You should call Jquery library before calling your project JS file's.
The problem here is that you are using jQuery without actually including that library of code in your HTML file.
<!DOCTYPE html>
<html>
<head>
<title>Experimenting with Javascript</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
Just to clarify, jQuery is a library that acts on top of JavaScript so you would need to include that library above your own scripts that use it.
NOTE: It is best practice to include your scripts just before your closing body tags.
I've scoured the net and stackoverflow looking for help, but can't seem to find any and I consider myself officially stumped. All of my code worked without a problem when it was all within standard script tags, then as soon as I moved them to their own .js file it crapped out. Help! This is what I now have in index.html (I've cut out all the irrelevant code since I'm just testing):
<html>
<head>
<title>PhoneGap Test</title>
<meta name="viewport" content="width=device-width, user-scalable=no;" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/src/lib/jquery-1.7.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/src/jqtouch-jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/src/jqtouch.js"></script>
<script type="text/javascript" src="databasecalls.js"></script>
</head>
<body onload="init();">
<p>Some stuff here</p>
</body>
</html>
Then, this is what I have in databasecalls.js:
alert("file loaded");
function init(){
document.addEventListener("deviceready", phoneReady, false);
}
function phoneReady(){
// **** first, open the database ****
alert("Start making DB object");
dbShell = window.openDatabase("TimeBlogger", "1.0", "TimeBlogger", 20000000);
alert("Created DB object");
//and run another function if the setup is successful (displayEntries)
dbShell.transaction(setupDBTable, errorHandler, getDBProjectEntries)
}
So, unless I am mistaken, I should at the very least get alert(); to run as soon as it is read into index.html, right? I'm not even getting that! Is there something with the phonegap API that I missed... like everything needs to be in index.html or something?
Thanks in advance!
Justin