I'm trying to add an image to my canvas but I'm getting the following error:
Uncaught TypeError: Cannot read property 'hasLoaded' of undefined
It says the error is coming from this line:
this.add.image('block',100,255);
index.html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Camera Learning</title>
<script src="js/phaser.min.js"></script>
<script src="js/states/boot.js"></script>
</head>
<body>
<script>
(function(){
var game = new Phaser.Game(450, 510, Phaser.AUTO, 'game');
game.state.add('boot', boot);
game.state.start('boot');
})();
</script>
</body>
</html>
boot.js:
boot = function(game){
console.log("%cStarting my awesome game", "color:white; background:red");
};
boot.prototype = {
preload: function(){
this.load.image('block','./res/borderblock.png');
},
create: function(){
console.log('adding');
this.add.image('block',100,255);
console.log('added');
}
};
this.add.image('block',100,255); should be this.add.image(100, 255, 'block'); - arguments order does matter and when the method receives a string instead of a number, things naturally don't work. In this case you have x, y and the image's key.
To add image this.add.image(x,y,'key'); or you can use 'sprite' like this.add.sprite(x,y,'key');
Related
I recently started working on this project last few days from CodingTrain, however I kept running into this 'split' error. I've tried looking around how to fix it but I'm very new to JS. If anyone can help I would greatly appreciate it.
Sketch.js
let brain;
function setup() {
createCanvas(640, 480);
let options = {
inputs: 34,
outputs: 4,
task: 'classification',
debug: true
}
brain = ml5.neuralNetwork(options);
brain.loadData('ymca.json', dataReady);
}
function dataReady() {
brain.normalizeData();
brain.train({epochs: 50}, finished);
}
function finished() {
console.log('model trained');
brain.save();
}
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
<script src="https://unpkg.com/ml5#0.5.0/dist/ml5.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
Split is reserved for strings so at some point looks like P5 is expecting a string but not getting it. You should be able to follow the error stack in your dev tools console and see what line of your code the error is coming from.
I'm trying to run p5 inside an IIFE but getting this error:
Uncaught TypeError: Cannot read property 'className' of undefined
It doesn't show up without IIFE.
sketch.js
var sketch = (function(p5) {
setup = function() {
p5.createCanvas(p5.windowWidth, p5.windowHeight);
p5.background(0);
};
}(new p5(sketch, "canvas")));
index.html
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.23/p5.js"></script>
</head>
<body>
<script language="javascript" type="text/javascript" src="main.js"></script>
<div id = "canvas"></div>
</body>
</html>
Your syntax is a little weird. Why are you wrapping both the function and the call to new p5() in parenthesis? Also, you're missing a variable name for the setup() function definition.
Correcting all of that would look like this:
var sketch = function(p5) {
p5.setup = function() {
p5.createCanvas(p5.windowWidth, p5.windowHeight);
p5.background(0);
};
}
new p5(sketch, "canvas");
I also would not use p5 as a variable or parameter name since that's the name of the overall p5.js library, so I'd do something like this:
var s = function(sketch) {
sketch.setup = function() {
sketch.createCanvas(sketch.windowWidth, sketch.windowHeight);
sketch.background(0);
};
}
new p5(s, "canvas");
More info can be found in the p5.js GitHub wiki.
A real beginner here, with a really basic question, but I simply can't get Javascript to change pictures when using the build in "onclick()" with HTML images..
I looked through so many questions about this, and tried different approaches to changing it, but can't get it to work.
I've tried with different src's, providing the full path and with online image adresses. Tried passing the variable. Simply can't get it to work.
<head>
<meta charset="utf-8">
<title> Javascript - changing images </title>
<script type="text/javascript">
function change() {
var image = document.getElementByID("fpimage");
image.src = "logo2.png"
}
</script>
</head>
<body>
<img src="logo.png" alt = "bla" id = "fpimage" onclick="change();"">
</body>
</html>
Change
var image = document.getElementByID("fpimage");
TO
var image = document.getElementById("fpimage");
You misspelled getElementById with a capital D
<head>
<meta charset="utf-8">
<title> Javascript - changing images </title>
<script type="text/javascript">
function change() {
var image = document.getElementById("fpimage");
image.src = "logo2.png"
}
</script>
</head>
<body>
<img src="http://i.imgur.com/cJjyJaG.jpg" alt = "bla" id = "fpimage" onclick="change();"">
</body>
</html>
Yep, like Clyde said, you made a mistake on the getElementById() function, keep in mind that Js is case sensitive ;)
<head>
<meta charset="utf-8">
<title> Javascript - changing images </title>
<script type="text/javascript">
function change() {
var image = document.getElementById("fpimage");
image.src = "http://www.dinosoria.com/mammifere/paresseux-206.jpg"
}
</script>
</head>
<body>
<img src="http://s.minutebuzz.com/i/2014/05/sloths-L.jpg.jpg" alt = "bla" id = "fpimage" onclick="change();"">
</body>
</html>
Chrome throws the following error:
Uncaught TypeError: Property 'js' of object function
(){d.ready.apply(null,arguments)} is not a function
While Firefox throws a TypeError: head.js is not a function
Here is my code:
<!doctype html>
<html lang="eng" ng-app="app">
<head>
<meta charset="UTF-8">
<title>{{ page_title }}</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.core.min.js"></script>
</head>
<script>
head.js({ angularJS: "https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"},
{ jQuery: "http://code.jquery.com/jquery-1.10.1.min.js" },
{ internalApp: "app/js/app.js"});
head.ready('jQuery', function() {
$(document).ready(function() {
console.log('jQuery loaded successfully');
});
});
</script>
<body>
<!-- add data here -->
</body>
</html>
You have loaded the Responsive Design + Feature Detections script http://cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.core.min.js and not the Asset Loader http://cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.load.min.js
I just made the same mistake and found this post while looking up the answer :)
I try to use some 'dijit' widget from script, for example to change content or to connect event.
For this purpose I try to use 'data-dojo-id' attribute in html, which (as I understood) creates global object of type 'data-dojo-type' and name 'data-dojo-id'.
But I got errors... What I do wrong?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dojo test</title>
</head>
<body>
<div id="myDivId"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-id="myDojoId">
Hello Everyone!
</div>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad:true"></script>
<script type="text/javascript">
require(["dijit/dijit", "dijit/layout/ContentPane"], function(){
//myDojoId.setContent("Hello World!"); // error : myDojoId is not defined
// Even this not working:
console.log(dijit.byId("myDivId")); // undefined
console.log(dijit.byId("myDojoId")); // undefined
});
</script>
</body>
</html>
data-dojo-id and jsId (deprecated) attributes create a global object referring to that dijit.
I believe you need to wrap the lookups in a ready() call
<script type="text/javascript">
require(["dojo/ready","dijit/dijit", "dijit/layout/ContentPane"], function(ready,dijit,ContentPane){
//shouldn't be defined yet
console.log(dijit.byId("myDivId")); // undefined
console.log(myDojoId); // undefined
ready(function(){
console.log(dijit.byId("myDivId"));
//note how data-dojo-id doesn't have the lookup
console.log(myDojoId);
});
});
</script>