Develop Reference

Click on multiple buttons to progress to next page

need some help. When I click the yellow tape on the page it disappears (granting access up the stairs. However I'm struggling to program it so that when all three are clicked, it progresses to the next page. Any help appreciated.
var counter = 0;
function del1()
if (counter == 0) {
{
document.getElementById("img3").style.display = 'none';
counter++;
}
}
function del2()
if (counter == 1) {
{
document.getElementById("img4").style.display = 'none';
counter++;
}
}
function del3()
if (counter == 2) {
{
document.getElementById("img5").style.display = 'none';
counter++;
}
}
function win()
if (counter === 3) {
clearInterval(timer);
sessionStorage.setItem('timerem', rem);
window.open('page2.html', "_self");
}

You are better off using delegation
Wrap the tape images in a div with id = stairs and give each of them a class of tape
Let me know if you must cut them in order
const tapes = 3;
document.getElementById("stairs").addEventListener("click", function(e) {
const tgt = e.target; // whatever clicked in the div
if (tgt.className.contains("tape")) { // we clicked a tape
tgt.className.add("hide"); // hide it
const allSnipped = tgt.closest("div").querySelectorAll(".tape.hide").length === tapes; // count .hide's
if (allSnipped) {
clearInterval(timer);
sessionStorage.setItem('timerem', rem);
location = 'page2.html';
}
}
})
.hide {
display: none;
}
Your code fixed
var counter = 0;
function del1() {
if (counter == 0) {
document.getElementById("img3").style.display = 'none';
counter++;
}
}
function del2() {
if (counter == 1) {
document.getElementById("img4").style.display = 'none';
counter++;
}
}
function del3() {
if (counter == 2) {
document.getElementById("img5").style.display = 'none';
win();
}
}
function win() {
clearInterval(timer);
sessionStorage.setItem('timerem', rem);
location = 'page2.html';
}

Jquery if value <= something dont working

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);

clear javascript : determine which link was clicked

I have a cycle of links and I determined click event on them. And I want to define if navbar[1].clicked == true {doing something} else if navbar[2].cliked == true {doing something} etc. "By if else in " reveal functional callbackFn".
Here is the code:
var navbar = document.getElementById("navbar").getElementsByTagName("a");
for (var i = 0; i < navbar.length; i++) {
navbar[i].addEventListener('click', function() { reveal('top'); });
}
function reveal(direction) {
callbackFn = function() {
// this is the part where is running the turning of pages
classie.remove(pages[currentPage], 'page--current');
if (navbar[1].clicked == true) {
currentPage = 0;
} else if(navbar[1].clicked == true) {
currentPage = 1;
} else if(navbar[2].clicked == true) {
currentPage = 2;
} else if(navbar[3].clicked == true) {
currentPage = 3;
} else if(navbar[4].clicked == true) {
currentPage = 4;
};
classie.add(pages[currentPage], 'page--current');
};
}

This is typically a problem of closure.
You can make the following change
Here the call back function of the addEventListener is an IIFE, & in the reveal function pass the value of i
var navbar = document.getElementById("navbar").getElementsByTagName("a");
for (var i = 0; i < navbar.length; i++) {
navbar[i].addEventListener('click', (function(x) {
reveal('top',x);
}(i))};
}
In this function you will have access to
function reveal(direction,index) {
// not sure what this function is mean by, but you will have the value of `i` which is denote the clicked element
callbackFn = function() {
// this is the part where is running the turning of pages
classie.remove(pages[currentPage], 'page--current');
if (index == 1) {
currentPage = 0;
} else if (index == 1) {
currentPage = 1;
} else if (index == 2) {
currentPage = 2;
} else if (index == 3) {
currentPage = 3;
} else if (index == 4) {
currentPage = 4;
};
classie.add(pages[currentPage], 'page--current');
};
}

Here is the solution in my case.
Thank you brk for helping in any case, thanks again.
// determine clicked item
var n;
$('#navbar a').click(function(){
if($(this).attr('id') == 'a') {
n = 0;
} else if($(this).attr('id') == 'b') {
n = 1;
} else if($(this).attr('id') == 'c') {
n = 2;
} else if($(this).attr('id') == 'd') {
n = 3;
} else if($(this).attr('id') == 'e') {
n = 4;
};
});
var pages = [].slice.call(document.querySelectorAll('.pages > .page')),
currentPage = 0,
revealerOpts = {
// the layers are the elements that move from the sides
nmbLayers : 3,
// bg color of each layer
bgcolor : ['#52b7b9', '#ffffff', '#53b7eb'],
// effect classname
effect : 'anim--effect-3'
};
revealer = new Revealer(revealerOpts);
// clicking the page nav
document.querySelector("#a").addEventListener('click', function() { reveal('cornertopleft'); });
document.querySelector("#b").addEventListener('click', function() { reveal('bottom'); });
document.querySelector("#c").addEventListener('click', function() { reveal('left'); });
document.querySelector("#d").addEventListener('click', function() { reveal('right'); });
document.querySelector("#e").addEventListener('click', function() { reveal('top'); });
// moving clicked item's `n` into the function
function reveal(direction) {
var callbackTime = 750;
callbackFn = function() {
classie.remove(pages[currentPage], 'page--current');
currentPage = n;
classie.add(pages[currentPage], 'page--current');
};
revealer.reveal(direction, callbackTime, callbackFn);
}

JavaScript iterate through items backwards

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();

Shortening if, else if, else if ... else using loops

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);