infinite slider logic with back and forth button - javascript

http://jsfiddle.net/xgpqe4rv/
var i = 1;
$('#right').click(function(){
$('img').attr('src',arr[i]['logo']);
i++
});
so far I can only do until here, there are still 2 missing requirements. I want the infinite loop, means it goes back to the 1 when it clicked the 4th item. The other one is the back button.

Here a simple solution for your problem: http://jsfiddle.net/xgpqe4rv/1/. Just put an if statement in to track where you are and reset i when i==3;
$('img').attr('src',arr[0]['logo']);
var i = 1;
$('#right').click(function(){
$('img').attr('src',arr[i]['logo']);
if(i == 3) {
i=0;
}
else {
i++;
}
});
});

Demo
Try this
var i = 1;
$('#right').click(function(){
if(!$(this).hasClass("active"))
{
i=i+1;
$("#left").removeClass("active");
}
if(i == 4)
{
i=0;
}
$('img').attr('src',arr[i]['logo']);
i++;
$(this).addClass("active");
});
$('#left').click(function(){
if(!$(this).hasClass("active"))
{
i=i-1;
$("#right").removeClass("active");
}
if(i == 0)
{
i=4;
}
$('img').attr('src',arr[i-1]['logo']);
i--;
$(this).addClass("active");
});

Related

How to break a for-loop with a nested setTimeout() function in javascript?

The Situation
I have a function which is called on button click and which should draw an animated chart, updating the chart every 2 seconds. When the user clicks that button again, while the animation is still running, the animation should stop.
My current solution
Right now I have the following script which stops the animation visually, but the underlying for-loop continues until the end in the background:
var animRun = false;
$("#animateButton").on("click", function() {
if (animRun === false) {
redraw(data.slice(0,30))
//some CSS...
} else {
//Some CSS...
animRun = false;
}
});
function redraw(data) {
animRun = true;
for (var i=0; i<data.length;i++){
(function(i){
setTimeout(function(){
if(animRun === true) {
//draw the chart
return draw(data[i])
}
},2000*(i))
if (i === data.length -1) {
//reset animRun
if(animRun === true) {
//Some CSS things
//...
animRun = false;
}
}
})(i);
}
}
Question
What would be the correct way of stopping the for-loop when the user clicks the button again while the animation is still executing?
Did you try clearTimeout. Store your draw timeout to an array, and stop it when you done
var animRun = false;
var drawArr = [];
$("#animateButton").on("click", function() {
if (animRun === false) {
redraw(data.slice(0,30))
//some CSS...
} else {
//Some CSS...
animRun = false;
drawArr.forEach(d=>clearTimeout(d));
}
});
function redraw(data) {
animRun = true;
for (var i=0; i<data.length;i++){
(function(i){
drawArr[i] = setTimeout(function(){
if(animRun === true) {
//draw the chart
return draw(data[i])
}
},2000*(i))
if (i === data.length -1) {
//reset animRun
if(animRun === true) {
//Some CSS things
//...
animRun = false;
}
}
})(i);
}
}

My jukebox application breaks after cycling through all songs

My jukebox application does not start over after going through all the songs in the playlist. Rather it stops functionality all together. So far it plays,pauses,stops,goes back, and next. The second it runs through the final song and I hit "next" nothing happens, nor does any other function work.
Jukebox.prototype.next = function() {
this.jamz[index].pause();
index++
this.jamz[index].currentTime = 0;
this.jamz[index].play();
if (index == this.jamz.length) {
this.jamz[index].currentTime = 0;
this.jamz[index].play();
}
}
Jukebox.prototype.back = function() {
this.jamz[index].pause();
index--
this.jamz[index].currentTime = 0;
this.jamz[index].play();
if (index == 0) {
this.jamz[index].currentTime = 0;
this.jamz[index].play();
}
}
This is the code that runs perfectly until it reaches the end of the final song. I am trying to get it to go back to the first song in my jamz array which has all my music on it.
The error in my console seems to be;
Uncaught TypeError: Cannot set property 'currentTime' of undefined
at Jukebox.next (script.js:55)
You could try re-ordering the code to check if you have reached the end of the playlist first - otherwise you'll get a javascript error and it will stop your program ie:
Jukebox.prototype.next = function() {
this.jamz[index].pause();
if (index == this.jamz.length-1) {
index=0;
} else {
index++;
}
this.jamz[index].currentTime = 0;
this.jamz[index].play();
}
Jukebox.prototype.back = function() {
this.jamz[index].pause();
if (index == 0) {
// rotate back from first track to last track
index = this.jamz.length-1;
} else {
index--;
}
this.jamz[index].currentTime = 0;
this.jamz[index].play();
}
I think you have to check the index if it is not out of the range from 0 to jamz.length - 1 before you call this.jamz[index].play()
Lists in js are 0 indexed, this meanse that the last item in a list has the index list.length-1.
In your case you need to change index == this.jamz.length to index == this.jamz.length-1. Also, for good mesure, you should never use == if you can help it. The == operator in js is not the same as the == operator in other languages. You want to use the === operator.
Jukebox.prototype.next = function() {
this.jamz[index].pause();
index++
this.jamz[index].currentTime = 0;
this.jamz[index].play();
if (index === this.jamz.length-1) {
this.jamz[index].currentTime = 0;
this.jamz[index].play();
}
}
Jukebox.prototype.back = function() {
this.jamz[index].pause();
index--
this.jamz[index].currentTime = 0;
this.jamz[index].play();
if (index === 0) {
this.jamz[index].currentTime = 0;
this.jamz[index].play();
}
}
You are surpassing the length of the array and you aren't setting the next song when it reaches the end of the playlist.
Jukebox.prototype.next = function() {
this.jamz[index].pause();
this.jamz[index].currentTime = 0;
//Check if you are at the end of your playlist
if (index === this.jamz.length - 1) {
index = 0;
}else{
index++;
}
this.jamz[index].currentTime = 0;
this.jamz[index].play();
}

Javascript break/continue statement

I can't get this working:
var x = 1;
while (x == 1) {
}
function changeX(val) {
if (val == 1) {
x = 1;
} else if (val == 0) {
x = 0;
break;
}
}
and no matter what I do, I can't get this working. What I want to do is: I want the loop to stop working when I choose "0" or type it or anything. I have to use break/continue .
No matter what I do, I get wrong use of break or my browser crashes.
PS. In HTML part I put
<input type="text" value="1" onchange="changeX(this.value)">
Making your code work:
While will block the browsers thread. Therefore, you cannot click.
Do:
var x=false;
function react(){
if(x){return;}
//your code
console.log("sth");//e.g.
setTimeout(react,0);
}
react();
Now you can do your UI stuff
function changeX(val) {
if (val == 0) {
x = true;
}
}
What you really want:
var timer=false;
function input(val){
if(timer){
clearInterval(timer);
timer=false;
}
if(val){
timer=setInterval(function(){
val++;
alert(val);
if(val==10){
clearInterval(timer);
timer=false;
}
}, 1000);
}
<input oninput="input(this.value)">
<h3>Break Statement</h3>
<script>
let num=0;
while(num<5){
num++;
if((num==3)){
break;
}else{
document.write("num is: "+num+"<BR/>")
}
}
document.write("When if condition is true: while Loop Terminated");
</script>
<h3>Continue Statement</h3>
<script>
let val=0;
while(val<5){
val++;
if(val==3){
// skip the current loop iteration and jump to the next iteration
continue;
}
document.write("val = "+val+"<BR/>");
}
</script>

Why is function not executed when webpage is opened in browser?

I am trying to create a function that loops infinitely until user inputs that they would like to exit. Every time I open up the webpage in the browser, however, no prompt box appears and the infiniteLoop() function does not execute. Why is the infiniteLoop() function not being called?
function infiniteLoop() {
i= 0;
var begin= prompt("Shall we begin?");
if (begin == "Yes") {
var tryAgain= prompt("Exit loop?");
if (tryAgain != "Yes") {
infiniteLoop();
}
}
}
You need to call the function in the window onload event.
window.onload = function(){
infiniteLoop();
}
or, if you're using jquery
$(function() {
infiniteLoop();
});
The prompt box doesn't appear because you didn't call the function when your web page loads.
Add infiniteLoop() after you declare your function.
e.g.
function infiniteLoop() {
i= 0;
var begin= prompt("Shall we begin?");
if (begin == "Yes") {
while (i < 5) {
var tryAgain= prompt("Are you sure?");
if (tryAgain == "Yes") {
i++;
}
else {
infiniteLoop();
}
}
}
else {
infiniteLoop();
}
}
// Initial call
infiniteLoop();
IT WORKS, write 5 times "Yes"(case sensitive) it finishes, otherwise it works infinitely, and do not forget to call infiniteLoop()
Cleaned up and working
(function infiniteLoop() {
var begin = prompt("Shall we begin?");
if (begin === "Yes") {
var i= 0;
while (i < 5) {
var tryAgain = prompt("Are you sure?");
if (tryAgain === "Yes") {
i++;
}
else {
infiniteLoop();
}
}
}
else {
infiniteLoop();
}
})()

add reset function to click counter

This works, but the problem is it works only one time -- and then class ('active') is never added again -- it needs to be removed after 5 clicks as as done with the below, but after 5 it needs to reset and I would like the counter to go back to 0 so that after another 5 clicks it could work again!
var clickCount = 0;
$(".arrowRight").click(function () {
clickCount++;
if (clickCount >= 5)
// alert ("stop it!");
$(".arrowRight").removeClass("active");
else {
$(".arrowRight").addClass("active");
}
});
just set clickCount = 0 in the if statement
if (clickCount >= 5)
clickCount = 0;
$(".arrowRight").removeClass("active");
else {
$(".arrowRight").addClass("active");
}
Will something like this work?
var clickCount = 0;
$(".arrowRight").click(function () {
clickCount++;
if (clickCount >= 5) {
clickCount = 0;
$(".arrowRight").removeClass("active");
}
else {
$(".arrowRight").addClass("active");
}
});
This is another option:
if (clickCount%5==0) {
$(".arrowRight").removeClass("active");
} else {
$(".arrowRight").addClass("active");
}

Categories