Develop Reference

Load var n from localStorage and loop n times

I'm trying to learn JS and this is my little app.
Every time I press the "INSTANTIATE" button, it instantiates a tomatoe.png in my <div>.
When the user reloads the page, the tomatoe.png should appear as many times as they've pressed the "INSTANTIATE" button.
This is the code. For this purpose, I created a variable (i), and it increments on every button press.
I planned to save this variable into localStorage, and when the page gets reloaded, I want to call a loop function that instantiates the tomatoe.png i times.
function popUp() {
var img = document.createElement("img");
img.src = "tomato.png";
var src = document.getElementById("header");
src.appendChild(img);
i++;
localStorage.setItem("apples", i);
}
<button onclick="popUp()">INSTANTIATE</button>
<div id="header"></div>
So, when the user reloads the page, as many tomatoes should appear as many times they've pressed the button.
I think I have to use a loop, but I don't know how.

Just get the item in localStorage and loop until it reaches 0, creating a new image each time (localStorage don't works in StackOverflow snippets here because of security reasons, but you get the point).
var i = 0;
function popUp() {
newImage();
i++;
localStorage.setItem("apples", i);
}
function newImage() {
var img = document.createElement("img");
img.src = "tomato.png";
var src = document.getElementById("header");
src.appendChild(img);
}
var oldi = Number(localStorage.getItem("apples"));
while (oldi > 0) {
oldi--;
newImage();
}
<button onclick="popUp()">INSTANTIATE</button>
<div id="header"></div>

First of all, you have to declare i outside your function (in case you haven't done it already) and give it a value of zero, if it isn't exist in the Local Storage:
let i = localStorage.getItem("apples") || 0;
Then, create a loop, that loops i times:
for(let n = 0; n < i; n++){}
And finally, just create tomatoes:
const img = document.createElement("img");
img.src = "tomato.png";
const src = document.getElementById("header");
src.appendChild(img);
So, the full code should look like this:
document.addEventListener('DOMContentLoaded', function(){
function popUp() {
createTomato()
i++;
localStorage.setItem("apples", i);
}
function createTomato() {
const img = document.createElement("img");
img.src = "tomato.png";
const src = document.getElementById("header");
src.appendChild(img);
}
document.getElementById("instantiate").addEventListener("click", popUp)
let i = localStorage.getItem("apples") || 0;
for (let n = 0; n < i; n++) createTomato();
})
<button id="instantiate">INSTANTIATE</button>
<div id="header"></div>
Try it on codepen.io

I have been makign a code with javascript that run o. while I have made it run n

I have been writing Javascript code to show a traffic light with a changing image. It uses a set array but I am new to coding and have not been told how to do this. I have written the code below but it is still not working. I can get it to run by clicking it but I need it to run without having to press the button lots of times.
It changes between images that are in the same folder as the code. I want it to work by a person only pressing the button once.
HTML:
<img id="light" src="traffitlr.jpeg">
<button type="button" onclick="changeLights()">changelights(and Start Lights)</button>
<button type="button" onclick=setinterval(change,1000)>start auto cycle</button>
Javascript:
var list = [
"traffitlg.jpg",
"traffitla.jpg",
"traffitlr.jpg",
"traffitly.jpg"
];
var index = 0;
function changeLights() {
index = index + 1;
if (index == list.length) index = 0;
var image = document.getElementById('light');
image.src=list[index];
}

var list = [
"traffitlg.jpg",
"traffitla.jpg",
"traffitlr.jpg",
"traffitly.jpg"
];
var index = 0;
var startChangeLights=function changeLights() {
console.log("change lights");
index = index + 1;
if (index == list.length) index = 0;
var image = document.getElementById('light');
image.src=list[index];
setTimeout(changeLights,6000);//change in 6 seconds ( 6000milliseconds)
startChangeLights=function(){console.log("already started");};//prevent user from starting multiple times
}
Use like this:
startChangeLights();//change lights
startChangeLights();//already started
//after 6 s : change Lights
I mainly use a Timeout, that changes the lights every 6 seconds. I also use an named-anonymous function, to prevent starting twice...

change auto image slider to link click slider

i want change this image slider, as a onclick slider.
this slider is auto slide. i need to slide each image by click a link.
DEMO check here
(function(){
document.getElementById('slideshow').getElementsByTagName('img')[0].className = "fx";
window.setInterval(kenBurns, 4000);
var images = document.getElementById('slideshow').getElementsByTagName('img'),
numberOfImages = images.length,
i = 1;
function kenBurns() {
if(i==numberOfImages){ i = 0;}
images[i].className = "fx";
if(i===0){ images[numberOfImages-2].className = "";}
if(i===1){ images[numberOfImages-1].className = "";}
if(i>1){ images[i-2].className = "";}
i++;
}
})();

Change your javascript as follows:
(function(){
document.getElementById('slideshow').getElementsByTagName('img')[0].className = "fx";
//remove the part that was auto-advancing the images on a timer
var images = document.getElementById('slideshow').getElementsByTagName('img'),
numberOfImages = images.length,
i = 1;
//set the ken burns function to go when you click "slideshow"
slideshow.onclick=function kenBurns() {
if(i==numberOfImages){ i = 0;}
images[i].className = "fx";
if(i===0){ images[numberOfImages-2].className = "";}
if(i===1){ images[numberOfImages-1].className = "";}
if(i>1){ images[i-2].className = "";}
i++;
}
})();
Edit:
http://jsfiddle.net/enigmadan/mzRxB/4/
Instead of your ken burns effect code, which removes the effect only after an image has passed, you have to remove the effect every time. This way, no matter what order you click the links, you will be able to see the effect every time.
document.getElementById('slideshow').getElementsByTagName('img')[0].className = "fx";
var images = document.getElementById('slideshow').getElementsByTagName('img');
//no longer need i
numberOfImages = images.length;
//this variable is passed in by the button clicked.
window.kenBurns = function (imageNum){
//using variable to choose image
images[imageNum].className = "fx";
//a for loop to remove 'fx' class from all images except the current one.
for(var i=0;i<numberOfImages;i++){
if(i===imageNum){ i++}
images[i].className = "";
}
};
And then call the function via links that look like this:
link1
Or if you prefer onclick:
<a onclick="kenBurns(1);" href="javascript:void(0);">link2</a>

Play an audio file repeatedly with fast button clicks

I'm tring to provide audio feed back on a button using html5 audio.
It works fine when clicking slowly, but when clicking the button faster it misses some of the clicks.
http://jsfiddle.net/sWsTb/
HTML
<div id="count">0</div>
<button>Click</button>
JS
var snd = new Audio("https://dl.dropbox.com/u/14037764/Development/jsfiddle/click2.mp3");
var count = 0;
$("button").click(function () {
snd.pause();
snd.currentTime = 0;
snd.play();
count++;
$("#count").text(count);
return false;
});
After adding snd.pause(); and snd.currentTime = 0; lines, it's better but still misses some of the fast clicks. Is there any way to fix that?

Javascript timelapse-effect: displaying 30 images/second (read for more detail)

I have a client who has made a 'Visual Diary' of photographs that he took once a day for 365 days, for his portfolio site. He wants me to put these together into a time-lapse effect piece. I thought about using Flash but in the end opted for JavaScript.
What needs to happen is this: The images cycle really really quickly with no transitions or anything, just image-image-image etc. About 30/fps or something like that. When you click the flashing images, it stops on the image you have selected, so the user can take a look. When you click again, the slideshow starts playing again.
My problem is I'm a PHP/XHTML/CSS bloke who hasn't really the foggiest about JavaScript. I can happily integrate it into any page, but it's just coding the JavaScript that's troubling me.
On his homepage, I have this code used to display a basic slideshow - with transition effects etc. It's in the HTML but you can fathom out the code I'm sure:
<!-- Code for slideshow -->
<!-- Found on http://www.webdeveloper.com/forum/showthread.php?t=81441 -->
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 3000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.jpg'
Pic[5] = '6.jpg'
Pic[6] = '7.jpg'
Pic[7] = '8.jpg'
Pic[8] = '9.jpg'
Pic[9] = '10.jpg'
Pic[10] = '11.jpg'
Pic[11] = '12.jpg'
Pic[12] = '13.jpg'
Pic[13] = '14.jpg'
Pic[14] = '15.jpg'
Pic[15] = '16.jpg'
Pic[16] = '17.jpg'
Pic[17] = '18.jpg'
Pic[18] = '19.jpg'
Pic[19] = '20.jpg'
// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
// End -->
</script>
Is there any way to modify this code to turn off all transitional effects, and make it stop playing when you click it/start it again? Otherwise, a reference to some different code would be helpful.
Thank you everybody!
Jack

You seem to be using IE-specific code. I would recommend using the various effects modules in a dedicated JavaScript library such as MooTools (my personal favourite), jQuery, or Prototype + script.aculo.us.
To stop the slideshow, you should be able to simply clear timeout t:
clearTimeout(t);
Also, you shouldn't quote the first parameter of setTimeout. Pass it a function reference:
setTimeout(runSlideShow, slideShowSpeed);