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

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!

Related

How to Create a Random Text Generator with Countdown Timer in Javascript?

So, I'm trying to create a random text generator in Javascript using Math.floor and Math.random which I combine with countdown timers using Javascript as well. However, the result after the countdown value has been <= 0 does not appear random text that I have made in the function.
In fact, it appears undefined. How's the solution? The script I created is below.
<button id="btn" style="background-color:red;width:30px;height:30px;"></button>
<script>
var timer = 5;
var id;
function create_random_string(string_length){
var random_string = 'X-';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890'
for (var i, i=0; i < string_length; i++){
random_string += characters.charAt(Math.floor(Math.random() * characters.length))
}
}
function starButton() {
this.style.display = 'none';
id = setInterval(function () {
timer--;
if (timer <= 0) {
clearInterval(id);
document.getElementById("script").innerHTML = create_random_string(5);
} else {
document.getElementById("script").innerHTML = timer + " seconds to get Code";
} }, 1000);
};
var clickbtn = document.getElementById("btn");
clickbtn.onclick = starButton;
</script>
<div id="script"></div>
You were not returning anything from your function. If you don't return function value how it will get it! Check this now.
var timer = 5;
var id;
function create_random_string(string_length){
debugger;
var random_string = 'X-';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890'
for (var i, i=0; i < string_length; i++){
random_string += characters.charAt(Math.floor(Math.random() * characters.length))
}
return random_string;
}
function starButton() {
this.style.display = 'none';
id = setInterval(function () {
timer--;
if (timer <= 0) {
clearInterval(id);
document.getElementById("script").innerHTML = create_random_string(5);
} else {
document.getElementById("script").innerHTML = timer + " seconds to get Code";
} }, 1000);
};
var clickbtn = document.getElementById("btn");
clickbtn.onclick = starButton;
<button id="btn" style="background-color:red;width:30px;height:30px;"></button>
<div id="script"></div>

Automatically Change Individual Table Data Using Javascript

I'm trying to mimic the look of a stock-exchange board, but can't seem to automatically change text without stopping another.
I've tried
var text = ["2.0%", "1.7%", "1.9%", "1.8%", "1.9%"];
var counter = 0;
var elem = document.getElementById("n1");
var inst = setInterval (change, 1000);
function change () {
elem.innerHTML = text[counter];
counter++;
var content = document.getElementById("n1");
if (counter >= text.length) {
counter = 0;
}
}
var text = ["-12.0%", "-13.7%", "-13.9%", "-12.8%", "-13.9%"];
var counter = 0;
var elem = document.getElementById("n2");
var inst = setInterval (change, 1000);
function change () {
elem.innerHTML = text[counter];
counter++;
var content = document.getElementById("n2");
if (counter >= text.length) {
counter = 0;
}
}
To no avail.
You can't have two different functions with the same name. One will override the other.
I created a single function that accomplishes your goals by passing in the target element and the data as arguments.
function change(elem, data) {
let counter = 0;
setInterval(function() {
elem.innerHTML = data[counter];
counter++;
if (counter >= data.length) {
counter = 0;
}
}, 1000);
}
change(document.getElementById("n1"), ["2.0%", "1.7%", "1.9%", "1.8%", "1.9%"]);
change(document.getElementById("n2"), ["12.0%", "2.7%", "3.9%", "4.8%", "5.9%"]);
<div id="n1"></div>
<div id="n2"></div>

setInterval into Infinity loops

Her is my new code with setinternal of 4 images. However, I am trying to have an infinite loops of the same images. Can you help me to understands how to create a setInterval loop.
<script type="text/javascript" >
var OpenWindow = window.open("","","top=100, left=400,resizable=yes,height=550,width=550,menubar=yes,location=yes,resizable=yes,scrollbars=yes");
var imgURLS = ['Oculus.jpg', 'future-vr.jpg', 'morpheus.jpg', 'samsungvr.jpg'];
var imgIndex = 0;
var timer = setInterval(function() {
for (var imgIndex = 0; j < imgURLS.length; j++)
{
for (var imgIndex = 0; i < imgURLS.length; i++)
{
clearInterval(timer);
} else {
OpenWindow.document.write("<div class='css-slideshow'>");
OpenWindow.document.write("<figure>");
OpenWindow.document.write('<img src ="' + imgURLS[imgIndex++] + '">');
OpenWindow.document.write("</figure>");
OpenWindow.document.write("</div>");
}
}, 3000);
</script>
I just figure out how to make longer loops. However, my images are showing broke?
<script type="text/javascript" >
var OpenWindow = window.open("","","top=100, left=400,resizable=yes,height=550,width=550,menubar=yes,location=yes,resizable=yes,scrollbars=yes");
var imgURLS = ['Oculus.jpg', 'future-vr.jpg', 'morpheus.jpg', 'samsungvr.jpg'];
var imgIndex = 0;
var i = setInterval(function() {
imgIndex++;
if(imgIndex === 20) {
clearInterval(i);
} else {
OpenWindow.document.write("<div class='images-1'>");
OpenWindow.document.write('<img src ="' + imgURLS.length + '">');
OpenWindow.document.write("</div>");
}
}, 3000);
</script>
I figure out why the image were broke. it was missing this imgURLS[imgIndex]
new code is:
OpenWindow.document.write('<img src ="' + imgURLS[imgIndex] + '">');
OpenWindow.document.write('<img src ="' + imgURLS.length + '">');
Here's a simple way with setTimeout.
1) Add an id to your containing div and target it.
var image = document.querySelector('#css-slideshow img');
2) Use setTimeout to repeatedly call the same loop function with increments of count. If count equals the length of the images array, set it to zero.
function carousel() {
var timer, count = 0;
var loop = function loop(count) {
if (count === imgURLS.length) count = 0;
image.src = imgURLS[count];
timer = setTimeout(loop, 2000, ++count);
}
loop(count);
}
carousel();
DEMO

Inserting incremental values into loop array

Right now I am animating an image by stringing multiple images together with setInterval(showNextSlide, 100); and it works really well.
The only thing that I'm running into problems with is adding values dynamically into var slides = [src, ] the while loop just loads the final image.
Also the way the images are saved the increment moves to the next zero so 01009 converts to 01010 whenever I use my loop it will convert to 010010 note the extra zero at the end.
Javascript
window.onload = function() {
var img = 0
while (img < 15) {
img++;
}
var src = 'assets/images/earth/Sequence%0100' + img + '.jpg.';
var slides = [src, ],
index = 0,
timer = 0;
// Show the first slide
showNextSlide();
// Show "next" slide every five seconds
timer = setInterval(showNextSlide, 100);
// The function we call to show the "next" slide
function showNextSlide() {
if (index >= slides.length) {
index = 0;
}
document.getElementById('earth').src = slides[index++];
}
};
JsFiddle
try this:It will keep on changing the image src of earth based on the index value.
Update based on JEES Comment.
<script>
window.onload = function() {
var i = 0
var slides = [];
while (i < 200) {
if(i <= 9){ img= '0100' + i++; }
else if(i <= 99){ img= '010' + i++; }
else{ img= '01' + i++; }
var src = 'assets/images/earth/Sequence%' + img + '.jpg';
slides.push(src);
}
console.log(slides);
index = 0,
timer = 0;
// Show the first slide
showNextSlide();
// Show "next" slide every five seconds
timer = setInterval(showNextSlide, 100);
// The function we call to show the "next" slide
function showNextSlide() {
if (index >= slides.length) {
index = 0;
}
document.getElementById('earth').src = slides[index++];
}
};
</script>
<img src="" id="earth">
Please Try It :
var img = 0;
var slides = new Array();
while (img < 5) {
img++;
var src = 'assets/images/earth/Sequence%0100' + img + '.jpg';
slides.push(src);
}
This is part of the answer and it will fix it when img value is 9 or 99 since he has 200 images, if images number > 1000 he'd need another one when img value 999.. please tell me if i should delete this answer:
UPDATED:
var img = 0;
while(img < 200) {
if (img < 10) { imgURL = '0100' + img; }
else if (img < 100) { imgURL = '010' + img;}
else { imgURL = '01' + img; }
slides.push('assets/images/earth/Sequence%' + imgURL + '.jpg');
img++;
}
check this Fiddle to see it in action..

Random LocalStorage Jquery

I have a group of divs called "oponente", and if the user do not click on one of them in five seconds the script will choose one randomly. What I dont know how to do is to keep in LocalStorage which div the script had choose. Here is my script, I dont know what to write on 'key name' and so on.
$(document).ready(function () {
$(".oponente").addClass("gray");
var elements = $(".oponente");
var elementCount = elements.size();
var elementsToShow = 1;
var alreadyChoosen = ",";
var i = 0;
while (i < elementsToShow) {
var rand = Math.floor(Math.random() * elementCount);
if (alreadyChoosen.indexOf("," + rand + ",") < 0) {
alreadyChoosen += rand + ",";
setTimeout(function () {
elements.eq(rand).window.localStorage.setItem('key name', 'key name');
}, 5000);
++i;
}
}
});
You can store index of selected one. Then you can get child from the parent with that index number clearly.
Let me simulate
$(document).ready(function () {
$(".oponente").addClass("gray");
var elements = $(".oponente");
var elementCount = elements.size();
var elementsToShow = 1;
var alreadyChoosen = ",";
var i = 0;
while (i < elementsToShow) {
var rand = Math.floor(Math.random() * elementCount);
if (alreadyChoosen.indexOf("," + rand + ",") < 0) {
alreadyChoosen += rand + ",";
setTimeout(function () {
localStorage.setItem('indexOfSelected', selectedDiv.index());
}, 5000);
++i;
}
}
});
Then you can get the selected div with
var indexOfSelected = localStorage.getItem('indexOfSelected');
myDiv = parentDiv.children(":eq("+indexOfSelected+")")
All you need to init a selectedDiv then a parentDiv which is parent of the selectedDiv.

Categories