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';
}

DropDownCheckBoxes select all issue

I am using Saplin DropDownCheckBoxes but it has select all issue for hat i have write below java script code on Document.ready its working in chrome browser proper with all proper functionality but is wasn't working properly in IE browser please help me in the same
<%# Register Assembly="DropDownCheckBoxes" Namespace="Saplin.Controls" TagPrefix="asp1" %>
<asp1:DropDownCheckBoxes ID="chkSubClient_Custom" runat="server" AddJQueryReference="true" UseSelectAllNode="true" Width="150px">
<Style2 SelectBoxWidth="150" /> </asp1:DropDownCheckBoxes>
Java Script Code:-
$('input[type=checkbox]').change(function () {
debugger;
var Checked = 0;
var UnChecked = 0;
var OneUnChecked = 0;
var Count = 0;
$('input[type=checkbox]').each(function () {
if (this.name.indexOf("chkSubClient_Custom_sll") > 0) {
if (this.checked == true) {
Checked = 1;
}
}
});
$('input[type=checkbox]').each(function () {
if (Checked == 1) {
if (this.name.indexOf("chkSubClient_Custom") > 0) {
this.checked = true;
}
}
});
$('input[type=checkbox]').each(function () {
if (this.name.indexOf("chkSubClient_Custom_sll") < 0) {
if (this.name.indexOf("chkSubClient_Custom") > 0) {
if (this.checked == false) {
Count = 1;
}
}
}
});
$('input[type=checkbox]').each(function () {
if (this.name.indexOf("chkSubClient_Custom_sll") > 0) {
if (Count == 0) {
this.checked = true;
}
}
});
});
});

Try this
if ($(this).is(':checked'))
{
// more code
}

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

.JS Function will continue executing, with wrong values

As you can see this is actually a simple application, however the code seems to continue using the first IF statement even though it isn't correct/relevant anymore.
HTML
<div id="Slideshow">
<img id="Slide" src="images/Slide01.jpg" width="600px" height="450px">
<button type="button" onClick="SlideShowTimer()">Click Me!</button>
</div>
<!--Closing Slideshow-->
JS
function SlideShowTimer() {
var IMG1 = "images/Slide01.jpg";
var IMG2 = "images/Slide02.jpg";
var IMG3 = "images/Slide03.jpg";
var Slide = document.getElementById('Slide').src;
if (document.Slide === document.IMG1) {
document.getElementById('Slide').src = "images/Slide02.jpg"; * * * //keeps executing this even once the value has actually changed to the value of 'IMG2'***
} else if (document.Slide === document.IMG2) {
document.getElementById('Slide').src = "images/Slide03.jpg";
} else if (document.Slide === document.IMG3) {
document.getElementById('Slide').src = "images/Slide01.jpg";
} else {
alert("Something Went Wrong");
}
}

It's because
document.getElementById('Slide').src
returns an absolute path.
EDIT:
function SlideShowTimer() {
var IMG1 = "images/Slide01.jpg";
var IMG2 = "images/Slide02.jpg";
var IMG3 = "images/Slide03.jpg";
var Slide = document.getElementById('Slide');
if (Slide.src.indexOf(IMG1) >= 0) {
Slide.src = "images/Slide02.jpg";
alert('1');
} else if (Slide.src.indexOf(IMG2) >= 0) {
Slide.src = "images/Slide03.jpg";
alert('2');
} else if (Slide.src.indexOf(IMG3) >= 0) {
alert('3');
Slide.src = "images/Slide01.jpg";
} else {
alert("Something Went Wrong");
}
}

Try like this
if (Slide == IMG1) {
document.getElementById('Slide').src = IMG2;
} else if (Slide == IMG2) {
document.getElementById('Slide').src = IMG3;
} else if (Slide == IMG3) {
document.getElementById('Slide').src = IMG1;
} else {
alert("Something Went Wrong");
}

Loop doesn't change content within div

This loop is supposed to increment the variable x every 15 seconds and depending upon what value x is the appropriate content is shown, the problem is that x doesn't increment.
var x = 1;
function slider() {
if (x > 4) {
x = 1;
}
if (x == 1) {
document.writeln("<div id='picture_slider_info'><h3>Example one</h3></div>");
} else if(x == 2) {
document.writeln("<div id='picture_slider_info'><h3>Example two</h3></div>");
} else if (x == 3) {
document.writeln("<div id='picture_slider_info'><h3>Example three</h3></div>");
} else {
document.writeln("<div id='picture_slider_info'><h3>Example four</h3></div>");
}
x++
}
setInterval(slider(), 15000);

You are not incrementing the variable x.
Change your code to:
var x = 1;
function slider() {
x++; // x incremented.
if (x > 4) {
x = 1;
}
if (x == 1) {
document.writeln("<div id='picture_slider_info'><h3>Example one</h3></div>");
} else if(x == 2) {
document.writeln("<div id='picture_slider_info'><h3>Example two</h3></div>");
} else if (x == 3) {
document.writeln("<div id='picture_slider_info'><h3>Example three</h3></div>");
} else {
document.writeln("<div id='picture_slider_info'><h3>Example four</h3></div>");
}
}
setInterval(slider(), 15000);

You shouldn't be calling slider(), instead, pass the function as argument to setInterval:
setInterval(slider, 1500).
You are currently passing the return result of slider() which is undefined to setInterval.

Nikola Dimitroff is right.
I'm giving this as an answer to give you the code.
<html>
<head>
<script type="text/javascript">
var x = 1;
function slider() {
console.log(x);
if (x > 4) { x = 1; }
if (x == 1) { console.log("One"); }
else if(x == 2) { console.log("Two"); }
else if (x == 3) { console.log("Three"); }
else { console.log("More"); }
x++
}
setInterval(slider, 1000);
</script>
</head>
<body>
</body>
</html>