Help me please to understand why not working that part of code.
I'm trying to style a block depending on a variable, but that part doesn't work.
var starsrating = 3;
function markstars() {
if (jQuery(starsrating).val() >= 1) {
jQuery("div.rating-star1").addClass("rating-star-active");
console.log("1");
}
if (jQuery(starsrating).val() >= 2) {
jQuery("div.rating-star1, div.rating-star2").addClass("rating-star-active");
console.log("2");
}
if (jQuery(starsrating).val() >= 3) {
jQuery("div.rating-star1, div.rating-star2, div.rating-star3").addClass("rating-star-active");
console.log("3");
}
if (jQuery(starsrating).val() >= 4) {
jQuery("div.rating-star1, div.rating-star2, div.rating-star3, div.rating-star4").addClass("rating-star-active");
console.log("4");
}
if (jQuery(starsrating).val() >= 5) {
jQuery("div.rating-star1, div.rating-star2, div.rating-star3, div.rating-star4, div.rating-star5").addClass("rating-star-active");
console.log("5");
}
console.log("end of func");
}
markstars();
starsrating is a plain number; you can't call jQuery on it.
A further simplification is to loop over all numbers 1..5 and set the states of the divs programmatically:
function markstars(starsrating) {
for (var i = 1; i <= 5; i++) {
jQuery("div.rating-star" + i).toggleClass("rating-star-active", starsrating >= i);
}
}
markstars(3);
Related
There is an object.
There is this method that initializes the timer in another method within the same object.
initstep1() {
var totAns = TriviaGame.corAnswered + TriviaGame.incorAnswered;
//for (let v=0;v<TriviaGame.arrayOfSelected.length;v++){TriviaGame.arrayOfSelected.pop();}
//for (let u=0;u<TriviaGame.arrayOfIntervals.length;u++){clearInterval(TriviaGame.arrayOfIntervals[u]);TriviaGame.arrayOfIntervals.pop();}
$("#maincontact0").css("display", "none");
$("#maincontact2").css("display", "none");
$("#maincontact1").css("display", "flex");
if (totAns != 10) {
TriviaGame.populatePromptContent();
} else {
TriviaGame.initstep3();
}
if (TriviaGame.corAnswered == 0 && TriviaGame.incorAnswered == 0) {
TriviaGame.giveQuestionsClickEvents();
TriviaGame.giveAnswersClickEvents();
}
$("#maincontact1qr").text() == 30;
TriviaGame.timerOnTheRight();
}
It's called timerOnTheRight...
Here it is...
Never gets cleared no matter what I do.
timerOnTheRight() {
//for (let u=0;u<TriviaGame.arrayOfIntervals.length;u++){clearInterval(TriviaGame.arrayOfIntervals[u]);TriviaGame.arrayOfIntervals.pop();}
console.log(TriviaGame.arrayOfIntervals);
let countDown1 = 30;
var thisVeryTimer = setInterval(function() {
countDown1--;
if ($("#maincontact1qr").text() != 1) {
$("#maincontact1qr").text(countDown1);
}
if ($("#maincontact1qr").text() < 11) {
$("#maincontact1qr").css("color", "orange");
}
if ($("#maincontact1qr").text() < 4) {
$("#maincontact1qr").css("color", "red");
}
if ($("#maincontact1qr").text() == 1) {
TriviaGame.arrayOfCurrent[0].timespent = "Yes";
clearInterval(thisVeryTimer);
TriviaGame.initstep2();
}
}, 600);
}
Make sure the conditional is correct, and the inside the conditional block is working when conditioning is met. You should console out thisVeryTimer to make sure it is the same interval id.
Another issue should be the scope of the variable.
clearInterval(thisVeryTimer);
Try to move the above code out of the interval block.
I have a script that should run a function every 5 seconds depending on what one was previously run however it seems to be skipping every second one.
let i = 0;
function testOne()
{
$("#two").fadeOut().css("display","none");
$("#three").fadeOut().css("display","none");
$("#four").fadeOut().css("display","none");
$("#five").fadeOut().css("display","none");
$("#one").fadeIn().css("display","block");
$("#iOne").addClass("btn-active");
$("#iTwo").removeClass("btn-active");
$("#iThree").removeClass("btn-active");
$("#iFour").removeClass("btn-active");
$("#iFive").removeClass("btn-active");
i++;
}
function testTwo() {
$("#one").fadeOut().css("display","none");
$("#three").fadeOut().css("display","none");
$("#four").fadeOut().css("display","none");
$("#five").fadeOut().css("display","none");
$("#two").fadeIn().css("display","block");
$("#iTwo").addClass("btn-active");
$("#iOne").removeClass("btn-active");
$("#iThree").removeClass("btn-active");
$("#iFour").removeClass("btn-active");
$("#iFive").removeClass("btn-active");
i++;
}
function testThree() {
$("#one").fadeOut().css("display","none");
$("#two").fadeOut().css("display","none");
$("#four").fadeOut().css("display","none");
$("#five").fadeOut().css("display","none");
$("#three").fadeIn().css("display","block");
$("#iThree").addClass("btn-active");
$("#iTwo").removeClass("btn-active");
$("#iOne").removeClass("btn-active");
$("#iFour").removeClass("btn-active");
$("#iFive").removeClass("btn-active");
i++;
}
function testFour() {
$("#one").fadeOut().css("display","none");
$("#two").fadeOut().css("display","none");
$("#three").fadeOut().css("display","none");
$("#five").fadeOut().css("display","none");
$("#four").fadeIn().css("display","block");
$("#iFour").addClass("btn-active");
$("#iTwo").removeClass("btn-active");
$("#iThree").removeClass("btn-active");
$("#iOne").removeClass("btn-active");
$("#iFive").removeClass("btn-active");
i++;
}
function testFive() {
$("#one").fadeOut().css("display","none");
$("#two").fadeOut().css("display","none");
$("#three").fadeOut().css("display","none");
$("#four").fadeOut().css("display","none");
$("#five").fadeIn().css("display","block");
$("#iFive").addClass("btn-active");
$("#iTwo").removeClass("btn-active");
$("#iThree").removeClass("btn-active");
$("#iFour").removeClass("btn-active");
$("#iOne").removeClass("btn-active");
i = 0;
}
window.setInterval(function()
{
if(i === 0) {
testOne();
i++;
} else if (i === 1) {
testTwo();
i++;
} else if (i === 2) {
testThree();
i++;
} else if (i === 3) {
testFour();
i++;
} else if (i === 4) {
testFive();
let i = 0;
}
}, 5000);
The functions are displayed after "let i = 0" however I chose not to put them in as they are too long. All they do is run some jQuery code before i++; or let i = 0; on the fifth function.
Do you know why this could be the issue?
Full JS Code - https://hastebin.com/icalefafoy.js
Ben J
You increment i twice, once in the interval code and once in the function itself:
function testOne() {
//...
i++
}
//...
testOne();
i++
just don't do that.
You're incrementing the variable i twice on each iteration of your interval, once in the function you call and once in the interval function itself, which is why it's skipping. Remove the i++ from your other functions.
let i = 0;
function testOne()
{
console.log("one");
}
function testTwo() {
console.log("two");
}
function testThree() {
console.log("three");
}
function testFour() {
console.log("four");
}
function testFive() {
console.log("five");
}
window.setInterval(function()
{
if(i === 0) {
testOne();
i++;
} else if (i === 1) {
testTwo();
i++;
} else if (i === 2) {
testThree();
i++;
} else if (i === 3) {
testFour();
i++;
} else if (i === 4) {
testFive();
let i = 0;
}
}, 5000);
I am iterating through some photos using this code:
if (this.lightboxIndex < this.photos.length - 1) {
this.lightboxIndex++;
} else {
this.lightboxIndex = 0;
}
this.lightboxSrc = this.photos[this.lightboxIndex].src;
},
How can i iterate backwards through the same photos? Is this along the lines of what I need to do?
if(this.lightboxIndex < this.photos.length - 1){
this.lightboxIndex--;
} else {
this.lightboxIndex = 0;
}
this.lightboxSrc = this.photos[this.lightboxIndex].src;
},
When you're iterating down, you need to check for reaching 0, not the highest index, and then go back to the highest index.
if (this.lightboxIndex == 0) {
this.lightboxIndex = this.photos.length - 1;
} else {
this.lightboxIndex--;
}
Your if test will always succeed, so it will just keep decrementing the index, going into negative numbers.
if(this.lightboxIndex > 0) {
this.lightboxIndex--;
} else {
this.lightboxIndex = this.photos.length - 1;
}
this.lightboxSrc = this.photos[this.lightboxIndex].src;
Why not use a decrementing for loop?
for (this.lightboxIndex = (this.photos.length - 1); this.lightboxIndex >= 0; this.lightboxIndex--) {
this.lightboxSrc = this.photos[this.lightboxIndex].src;
}
let think backward will go from last to first ,so if it is first index,assign to last index else decrease to first index !
forward will go from first to last ,so if it is last index , assign back to first index else increase to last index !
this.lightboxIndex = 0;
this.photos = ['a','b','c'];
function forward(){
if (this.lightboxIndex == this.photos.length -1) {
this.lightboxIndex = 0;
} else {
this.lightboxIndex++;
}
this.lightboxSrc = this.photos[this.lightboxIndex];
console.log(this.lightboxSrc);
}
function backward () {
if(this.lightboxIndex == 0) {
this.lightboxIndex = this.photos.length -1;
}
else {
this.lightboxIndex--;
}
this.lightboxSrc = this.photos[this.lightboxIndex];
console.log(this.lightboxSrc);
}
forward();
forward();
forward();
backward();
backward();
backward();
I'm new here so sorry if dublicate.
I'm trying to write a sudoku solver using backtracking method to make it pass all data dynamically into the document with its each recursion. When I tried to use setInterval() or setTimeout() it doesn't work the way I want it to work. What I need should be similar to this
Here's the code:
function backtrack(position) {
if (position === 81) {
return true;
}
if (sudokuArray[position] > 0) {
backtrack(position + 1);
} else {
for (var x = 1; x <= 9; x++) {
if (isValid(x, parseInt(position / 9), position % 9) === true) {
sudokuArray[position] = x;
//some code that invokes putSudokuArrayBack function with a small delay
//everytime backtrack function is invoked
if (backtrack(position + 1) === true) {
return true;
}
}
}
sudokuArray[position] = 0;
return false;
}
}
function putSudokuArrayBack() {
for (var i = 0; i <= 81; i++) {
var indexString = '#val-' + parseInt(i / 9) + '-' + i % 9;
$(indexString).val(sudokuArray[i]);
}
}
Any ideas(if it's even possible)? Thanks in advance!
I have the following lines of code:
$(function(){
$("div").scroll(function() {
function hpos(id) {
var pos = $("#" + id).position();
return pos.top;
}
function final(id) {
$("#header").html($("#" + id).html()),
$("h1").css("visibility","visible"),
$("#" + id).css("visibility","hidden");
}
if (hpos(5) < 0) {
final(5);
}
else if (hpos(4) < 0) {
final(4);
}
else if (hpos(3) < 0) {
final(3);
}
else if (hpos(2) < 0) {
final(2);
}
else {
final(1);
}
});
});
Shouldn't I be able to shorten it by using a loop instead of the else if statements? I can't find a way to make the loops work with my position().
for (var i = 5; i > 0; i--){
if (hpos(i) < 0) {
final(i);
break;
}
}
would something like this work? Not tested by the way
This should be shorter:
$.each([5,4,3,2], function(i,v) {
if( hpos(v) < 0 ) {
final(v);
return false;
} else if( v === 2 ) {
final(1);
}
});
An easier way to do lots of else if statements is to use the case method.
In case you need a while version:
:)
var elemId = 5;
while (elemId > 1) {
if (hpos(elemId) < 0) {
break;
}
elemId--;
}
final(elemId);