So, I have a page, where when a user holds left mouse button, Shrek images are drawn where his/her cursor is. The problem is, only one picture is created when the mouse is down, but I need an ENDLESS CURRENT OF SHREKS.
Here is the code:
var shrekId = 0;
document.onmousemove = function(event) {
mouseX = event.clientX;
mouseY = event.clientY;
}
window.addEventListener('selectstart', function(e){ e.preventDefault(); });
document.body.onmousedown = function(event) {
shrekId = 0;
interval = setInterval(draw(event), 100);
}
document.body.onmouseup = function() {
clearInterval(interval);
}
function draw(event) {
this["img" + shrekId] = document.createElement("img");
this["img" + shrekId].src = "http://pngimg.com/uploads/shrek/shrek_PNG3.png";
this["img" + shrekId].style = "height: 100px; width: 100px; position: absolute; left: " + (mouseX - 50) + "px; top: " + (mouseY - 50) + "px; x-index: 100;";
this["img" + shrekId].ondragstart = function() { return false; };
document.body.appendChild(this["img" + shrekId]);
shrekId += 1
}
setInterval()
takes a function as a parameter, this is done by passing the function name (without the brackets) like so:
myFunc()
{
console.log('hello');
return 1;
}
setInterval(myFunc, 100);
When you do include the brackets (like you did in your example), it will run the function, take the return of that function, and provide that to the setInterval instead. For example:
myFunc()
{
console.log('hello');
return 1;
}
setInterval(myFunc(), 100);
turns into
setInterval(1, 100);
because myFunc() returns 1.
So you should be able to fix your code by removing the brackets from your interval:
interval = setInterval(draw(event), 100);
// to
interval = setInterval(draw, 100);
Which also means you have to remove the parameter from the function:
function draw(event) {
// to
function draw() {
The problem is with this line: interval = setInterval(draw(event), 100);
The first parameter of setInterval
should be a function, but you're calling the function here and passing in the result, try the following instead:
interval = setInterval(() => { draw(event) }, 100);
Or if you aren't supporting ES6:
interval = setInterval(function() { draw(event) }, 100);
It doesn't look like you're using event
inside of the draw function though, if that's the case you can just pass the draw function itself:
interval = setInterval(draw, 100);
I have a string json object that I am trying to format and display in the html. I have tried using JSON.parse() and JSON.stringify() but the typeof is still showing as a string and it is displaying in ...
I have a string json object that I am trying to format and display in the html. I have tried using JSON.parse() and JSON.stringify() but the typeof is still showing as a string and it is displaying in ...
I'm using the Facebook API SDK for JavaScript to invite the authenticated user's friends to use the app. To invite the friends, I use the Invitable Friends API, like this: FB.ui({ method: '...
I'm using the Facebook API SDK for JavaScript to invite the authenticated user's friends to use the app. To invite the friends, I use the Invitable Friends API, like this: FB.ui({ method: '...
I created an AFK command for my discord bot but I am struggling to figure out how I would add "[AFK]" into the current users nickname. Below is what I have but this takes the users discord name ...
I created an AFK command for my discord bot but I am struggling to figure out how I would add "[AFK]" into the current users nickname. Below is what I have but this takes the users discord name ...
I'm currently writing an e2e test and I would like to create some classes which abstract certain async tasks for me. In the end I would like to instantiate an object, which let's me chain async ...
I'm currently writing an e2e test and I would like to create some classes which abstract certain async tasks for me. In the end I would like to instantiate an object, which let's me chain async ...