We Keep Coding

How do I change image of a slider closed in another function?

what I have in here is a simple slider with two images. Is there a way to change the var file of imageSwap() when the counter hits 12?
var number = Math.floor(Math.random() * 2) + 1;
var timer1 = 0;
var timer2 = 0;
function imageSwap(id) {
var img = document.getElementById("app" + id);
img.src = "red.png";
img.classList.add("selected");
var count = document.querySelectorAll(".selected").length;
console.log(count);
if (count == 12) {
// Change var file image of function Change()
}
}
function hide() {
$("#slider").fadeOut(500);
}
function change() {
number++;
if (number > 2) number = 1;
var file = '<img src="tree' + number + '.png" />';
document.getElementById("slider").innerHTML = file;
$("#slider").fadeIn(500);
timer1 = setTimeout("change()", 5000);
timer2 = setTimeout("hide()", 4500);
}
Thanks in advance!

JavaScript Help needed with pop up window and stop counter

I would love some help with this project. I am creating a small project with Javascript, I am still new with HTML,CSS, and JavaScript. What I would like to do with my program, is that the counter will stop after 1 minute has passed and a pop up window appears that no more clicks are accepted. Below is my code, any help will be appreciated!!
var count = 0;
var countblack = 0;
var countred = 0;
var countButton = document.getElementById("black");
var countButtonC = document.getElementById("red");
var displayCount = document.getElementById("displayCount");
black.onclick = function() {
count++;
countblack++;
displayCount.innerHTML = count;
displayCountblack.innerHTML = countblack;
}
red.onclick = function() {
count++;
countred++;
displayCount.innerHTML = count;
displayCountred.innerHTML = countred;
}
http://jsfiddle.net/wr1ua0db/544/

You can use setTimeout to count 60seconds and then disable the buttons. Below is the solution
var allowClick = true;
var count = 0;
var countblack = 0;
var countred = 0;
var black = document.getElementById("black");
var red = document.getElementById("red");
var displayCount = document.getElementById("displayCount");
var displayBlackCount = document.getElementById("displayBlackCount");
var displayRedCount = document.getElementById("displayRedCount");
black.onclick = function() {
if (!allowClick) return;
count++;
countblack++;
displayCount.innerHTML = count;
displayBlackCount.innerHTML = countblack;
}
red.onclick = function() {
if (!allowClick) return;
count++;
countred++;
displayCount.innerHTML = count;
displayRedCount.innerHTML = countred;
}
startTime(60); // time in seconds
function startTime(time) {
var timer = setTimeout(function() {
black.setAttribute('disabled', 'disabled');
red.setAttribute('disabled', 'disabled');
allowClick = false;
clearTimeout(timer)
}, 1000 * time)
}
<button id="black">Count Black</button>
<button id="red">Count Red</button>
<div>Display Count: <span id="displayCount">0</span></div>
<div>Black Count: <span id="displayBlackCount">0</span></div>
<div>Red Count: <span id="displayRedCount">0</span></div>

Running the animation after scrolling to the block

I have function that works after window.onload, but how to run it just after scrolled to the needed . I understand that using jQuery is easier, but I need to do in native JS.
window.onload = function move() {
var width = 1;
var elem = document.getElementsByClassName("myBar");
var maxValue = document.getElementsByClassName('max-value');
for(var i = 0; i < elem.length; i++) {
var params = {
elem: elem[i],
maxElem: maxValue[i],
width: width,
interval: null
};
params.interval = setInterval(frame, 20, params);
}
function frame(aParams) {
if (aParams.width >= aParams.maxElem.dataset.max) {
clearInterval(aParams.interval);
} else {
aParams.width++;
aParams.elem.style.backgroundColor = 'blue';
aParams.elem.style.width = aParams.width + '%';
aParams.maxElem.innerHTML = aParams.width + '%';
}
};
};
https://codepen.io/Slava91/pen/PjpGGr

Try this, it will trigger the animation again when you will scroll near to the ul element. #percentage is the id I have given to the ul element in your html.
window.onload = move();
function move() {
var width = 1;
var elem = document.getElementsByClassName("myBar");
var maxValue = document.getElementsByClassName('max-value');
for(var i = 0; i < elem.length; i++) {
var params = {
elem: elem[i],
maxElem: maxValue[i],
width: width,
interval: null
};
params.interval = setInterval(frame, 20, params);
}
function frame(aParams) {
if (aParams.width >= aParams.maxElem.dataset.max) {
clearInterval(aParams.interval);
} else {
aParams.width++;
aParams.elem.style.backgroundColor = 'blue';
aParams.elem.style.width = aParams.width + '%';
aParams.maxElem.innerHTML = aParams.width + '%';
}
};
}
isScrolled = false;
window.onscroll = function loadItBack(){
var rec = document.getElementById("percentage").getBoundingClientRect();
if(window.scrollY > 600 && !isScrolled){
isScrolled = true;
move();
}else if(window.scrollY < 600){
isScrolled = false;
}
};

For your every li, you can use getBoundingClientRect to execute your animation.
Don't forget to set a flag once animation completed, else, it will execute on every scroll.

How can I make my javascript slider more responsive (faster)?

This is my first project in Javascript. It's an image slider with a next and previous arrow. One thing really bothering me is that there can some very noticeable lag between clicking an arrow and the image actually changing.
I'd really appreciate if someone review my code and let me know what I could do better.
http://jsfiddle.net/afptfbs8/40/
var myImage = document.getElementById("mainImage");
var imageArray = ["http://lorempixel.com/400/200/sports/1/", "http://lorempixel.com/400/200/sports/2/", "http://lorempixel.com/400/200/sports/3/", "http://lorempixel.com/400/200/sports/4/"];
var imageIndex = 0;
var prevImage = document.getElementById("prev");
var nextImage = document.getElementById("next");
var myTime = 3000;
var myInterval = setInterval(changeImage, myTime);
function changeImage() {
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
myImage.setAttribute("src", imageArray[imageIndex]);
}
prevImage.onclick = function() {
clearInterval(myInterval);
myInterval = setInterval(changeImage, myTime);
if (imageIndex === 0) {
imageIndex = imageArray.length -1;
} else {
imageIndex = imageIndex - 1;
}
myImage.setAttribute("src", imageArray[imageIndex]);
};
nextImage.onclick = function() {
clearInterval(myInterval);
myInterval = setInterval(changeImage, myTime);
if (imageIndex === imageArray.length -1) {
imageIndex = 0;
} else {
imageIndex = imageIndex + 1;
}
myImage.setAttribute("src", imageArray[imageIndex]);
};
imageArray.forEach(function (value, index) {
var node = document.createElement("li");
var textNode = document.createTextNode(index);
node.appendChild(textNode);
document.getElementById("myList").appendChild(node);
});
myInterval

The problem is that each time you change the picture, you are refetching it from the server. Take a look at the network panel to see. I suggest preloading all of the images so that they do not need to be refetched every time.
var images = new Array();
for (var i = 0; i < imageArray.length; i++) {
images[i] = new Image();
images[i].src = imageArray[i];
}

Pause, Increase & Decrease Interval

I am currently writing a code to create a slideshow. My pause button works one time around but once it starts playing again and then doesn't pause again. & same thing once i press the increase button. decrease button doesn't work. I have tried anything. Can someone point me in the right direction or let me know what is wrong. http://jsfiddle.net/#&togetherjs=7F7KQf0TtS
var pic= new Array();
var pcount= 0;
var pindex = 0;
var ptimer;
var cap= new Array();
var ccount= 0;
var cindex = 0;
var ctimer;
var resetButton = document.getElementbyId('resetButton');
resetButton.onclick= reloadPage;
function getallpics(){
var size = prompt("How many pictures are you uploading?");
for (var i = 0; i<size; i++) {
pic[i] = prompt("Enter picture filename:");
pindex++;
cap[i] = prompt("Enter caption:");
cindex++;
}
}
function getpics() {
pcount++;
if (pcount > pindex) {
pcount = 1;
}
document.getElementById("pictures").innerHTML= "<img src=" +pic[pcount-1]+ ">";
}
function getcaps(){
ccount++;
if(ccount > cindex){
ccount=1;
}
document.getElementById("captions").innerHTML = cap[ccount-1];
}
function displaypics() {
ptimer = setInterval("getpics()", 3000);
ctimer = setInterval("getcaps()", 3000);
}
function pause(){
clearTimeout(ptimer);
clearTimeout(ctimer);
}
function increase() {
ptimer = setInterval("getpics()", 1000);
ctimer = setInterval("getcaps()", 1000);
}
function decrease() {
ptimer = setInterval("getpics()", 6000);
ctimer = setInterval("getcaps()", 6000);
}
function reloadPage(){
window.location.reload();
}