adding images to document in loop [closed] - javascript

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I have written this javascript code to add images each after a delay of 3 seconds but this code is not working kindly help.
function start() {
while(true) {
setTimeout(addObstracles(), 3000)
}
}
function addObstracle() {
var element = document.createElement('img');
element.id = 'obs';
element.className = 'obstracleAnimation';
element.src = 'enemy.png';
element.style.position = 'absolute';
element.style.top = '0px';
element.style.left = '100%';
element.style.width = '150px';
element.style.height = '100px';
document.body.appendChild(element);
}

setTimeout takes a function reference. You have a function invokation.
There are multiple ways to write this out:
setTimeout('addObstracles()', 3000) //i don't like this way
setTimeout(addObstracles, 3000) // pass the reference (I like this way!)
setTimeout(function() {
addObstracles()
}, 3000) //I like this when `addObstracles has parameters!

Like Sterling mentioned in his anser, you are calling the function addObstracles instead of passing it to setTimeout, just i want to add to it that because you are setting timout functions on fixed intervals you can use setInterval function instead:
function start() {
setInterval (addObstracles, 3000);
}
JSFiddle

There are multiple issues with this code. I will add to the answers the following:
be careful what function you define and what function you call: something != somethings
be careful where you call your start() function: it has to be after the body tag or body.appendChild won't exist
be careful how you style your element. With the current styling, it is not displayed at all. I have just removed element.style.position = 'absolute'; to make it visible
make sure the image you are trying to display is in the same folder as the script

Related

Javascript Function Doesn’t Execute [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
This simple function doesn’t execute when called. When taken out of the function it runs but not in the function. What gets the function to run?
HTML
<img id = “hide” src = “mypic.jpg”>
Javascript
Function show {
var x = document.getElementById(“hide”);
x.style.display = “none”
}
show();
You have the wrong declaration for a function
Function show {
var x = document.getElementById(“hide”);
x.style.display = “none”
}
show();
should be written as:
function show() {
var x = document.getElementById('hide');
x.style.display = 'none';
}
show();
<img id ="hide" src ="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
There is a couple of minor issues in your javascript, it should look like:
function show() {
var x = document.getElementById(“hide”);
x.style.display = “none”;
}
show();
In your code some basics are missing
"Function" must be "function"
function name must be with parenthesis i.e. functionName(){};
Your function declaration must be like this
function show(){}
Then you have to call the same function on some event like onClick() etc.
Here is the link you can go through JAVASCRIPT
Hope this helps you...Cheers!

reset interval doesn't work in javascript [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
clearInterval(interval)
var interval = setInterval(function(){
console.log('running')
},1000);
I have above code in a click event, the console.log('running') turn out to be trigger multiple times when I execute above code, why? I already clear the interval first before run the setInterval.
Assuming your code looks something like this:
$('#someButton').on('click', function() {
clearInterval(interval)
var interval = setInterval(function(){
console.log('running')
},1000);
});
then the problem you're having is all to do with scope. The second time your button is clicked, the function will run, but will have no reference to any variables created inside the function the first time it ran. (Try adding console.log(interval) as the first line in the click handler function). To solve this, you'll need to keep a reference to interval somewhere that the click handler can access it. For example:
var interval = null;
$('#someButton').on('click', function() {
clearInterval(interval)
interval = setInterval(function(){
console.log('running')
},1000);
});
See What is the scope of variables in JavaScript? for some examples of scope in action.
Ok, now I understand your problem. You need to declare interval in a higher scope (global if needed).
Your problem is the interval varible is declare inside the click function and therefor it's a local varible, you need to keep it elsewhere to access the reference in order to clear it.
Try this, and do not put all this in the click function, put it on the same level with the click function should work.
var interval;
function doInterval() {
if (interval != undefined) clearInterval(interval);
interval = setInterval(function(){
console.log('running');
},1000);
}
P/S: you should edit your question to clarify the question.

Reference to CSS [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I'm using this js code to change the background image but I'm unsure what needs to be referenced in the .css file. I read nothing but I am still getting a blank screen.
$(function() {
var body = $(‘body’);
var backgrounds = new Array(
‘url(images/bg.jpeg)’,
‘url(images/bg2.jpeg)’
‘url(images/bg3.jpeg)’
);
var current = 0;
function nextBackground() {
body.css(
‘background’,
backgrounds[current = ++current % backgrounds.length]
);
setTimeout(nextBackground, 10000);
}
setTimeout(nextBackground, 10000);
body.css(‘background’, backgrounds[0]);
});
I've also installed jquery by referencing the google CDN.
Many thanks for your help.
T
Since this doesn't have an official answer, I'll answer it, even though this is a repeat from the comments in the question.
The problem was the ‘curly quotes.’ They needed to be 'straight quotes.'
The code you provided uses incorrect quote marks for strings (‘ instead of '), and was missing a comma (,) after the second background.
$(function() {
var body = $('body');
var backgrounds = new Array(
'url(images/bg.jpeg)',
'url(images/bg2.jpeg)',
'url(images/bg3.jpeg)'
);
var current = 0;
function nextBackground() {
body.css(
'background',
backgrounds[current = ++current % backgrounds.length]
);
setTimeout(nextBackground, 10000);
}
setTimeout(nextBackground, 10000);
body.css('background', backgrounds[0]);
});
You can see a demo of it working here with colors instead of background images:
https://jsfiddle.net/kb58tvo9/1/
(A tidied up version here: https://jsfiddle.net/kb58tvo9/2/)

appendChild is not responding after class change - VANILLA Javascript [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I found answers alluding to this question but most of them seemed to be based on jQuery. As an exercise I am building a image slider app in jQuery and then Javascript. I want to understand what jQuery is doing under the hood, and be able to make the decision to use it or not based on the project.
My problem is this: when I click the next button, I want the gallery to slide to the left, and prevImg will be removed, currentImg will become next and so forth. I will then add a li element with the appropriate class nextImg and the image.
Everything is working fine, but the line of code nextImg.appendChild(next_ImgPath) is not appending an image.
function slideAnimSetting(direction) {
counterAction();
if (direction == 1) {
establishImgPaths();
for (var i = 0; i < innerListEl.length; i++) {
leftPosition = innerListEl[i].offsetLeft;
topPosition = innerListEl[i].offsetTop;
Tween.to(innerListEl[i], 1, {left: leftPosition-700});
}; // end for
prevImg.removeAttribute('class');
currentImg.className = 'prevImg';
nextImg.className = 'currentImg';
listEle = document.createElement('li');
listEle.className = 'nextImg';
for (var i = 0; i < innerUlEl.length; i++) {
innerUlEl[i].appendChild(listEle);
}; //end for
nextImg = document.getElementsByClassName('next-img');
nextImg = nextImg[0];
nextImg.appendChild(next_ImgPath);
setImageStyles();
}
}; // end slideAnimSetting
The console.log is telling me that nextImg is undefined.
You gave it a className of nextImg, but you're searching for next-img.

appendChild null | javascript/html [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I'm following a tutorial online on how to make a to do list, found here:
https://www.youtube.com/watch?v=MURDw0-BiEE
I've following it pretty closely, but it won't work. Browser states the appendChild is null. The tutorial is 2 years old, could a part of the code be outdated? I had it sending alerts through the button, but when I changed to the appendChild things stopped working.
I'm pretty new to this and really appreciate the help.
function addNewItem() {
var listItem = document.createElement("li");
listItem.innerText = "Hello";
list.appendChild(listItem);
}
var btnNew = document.getElementById("btnAdd");
btnNew.onclick = function() {
addNewItem(document.getElementById("todoList"));
};
And here's the related part of the HTML:
<p><button id="btnAdd">New Item</button></p>
<ul id="todolist">
</ul>
<script src="todo.js"></script>
</body>
You have defined your function without arguments and then you try to pass one :
function addNewItem(list) {}
P.S. : You also tried to getElementById todoList instead of todolist, so it also gave you error :
addNewItem(document.getElementById("todolist"));
JSFiddle
You've missed function parameter, list:
function addNewItem(list) {
var listItem = document.createElement("li");
listItem.innerText = "Hello";
list.appendChild(listItem);
}
var btnNew = document.getElementById("btnAdd");
btnNew.onclick = function() {
addNewItem(document.getElementById("todoList"));
};
You are passing a parameter to the function addNewItem() with addNewItem(document.getElementById("todoList")), but you aren't declaring this parameter in your function. So the variable list becomes null and appendChild() does not work. So change your first line:
function addNewItem() {
to
function addNewItem(list) {
and it will work.

Categories

Resources