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';
}
Related
My goal is, if a page contains the specified button, click it, and increase the amt_clicked by 1. When amt_clicked is greater than 15, wait for 60 seconds and reset amt_clicked. I have no idea how do this if statement. Example:
var amt_clicked = 0;
while (1) {
while (amt_clicked < 15) {
if (button found) { // this is where I am lost
iimPlay("TAG POS={{amt_clicked}} TYPE=BUTTON ATTR=TXT:Get");
amt_clicked++;
}
}
iimPlay("WAIT SECONDS=60");
amt_clicked = 0;
}
This will run 20 times per second, using the window.setInterval() function:
var amt_clicked = 0;
var amt_cooldown = 1200;
setInterval(function(){
if (amt_cooldown === 0)
amt_cooldown = 1200;
else if (amt_cooldown < 1200)
amt_cooldown -= 1;
else if (amt_clicked > 15) {
amt_clicked = 1;
amt_cooldown -= 1;
} else {
amt_clicked -= 1;
//Click
}, 50);
You can use combination of setInterval and setTimeout.
I have added comments to code for you to understand.
var amt_clicked = 0;
var setTimeoutInProcess = false;
//processing the interval click function
setInterval(() => {
checkButtonAgain();
}, 200);
function checkButtonAgain() {
var element = document.getElementById('iNeedtoBeClicked');
//if clicked 15 times then need to wait for 60 seconds
if (amt_clicked === 15) {
if (!setTimeoutInProcess) {
setTimeoutInProcess = true;
setTimeout(function() {
//resetting the amt-clicked
amt_clicked = 0;
setTimeoutInProcess = false;
}, 60000);
} else {
console.log('waiting');
}
} else if (typeof(element) != 'undefined' && element != null) {
//triggering click and increasing the amt_clicked
element.click();
amt_clicked++;
}
console.log(amt_clicked);
}
<button id="iNeedtoBeClicked">Click ME Button</button>
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've got a script that is a simple countdown.
You can put in a number press SET and then click START and the number will count down.
I use this in the gym, but I forget to press the SET button a lot after entering the new count.
Is it possible to let jquery take the form input or do I have to use a SET button?
var CCOUNT;
$(document).ready(function() {
$('#btnct').click(function() {
CCOUNT = $('#seconds').val();
cdreset();
});
});
var t, count;
function cddisplay() {
document.getElementById('timespan').innerHTML = count;
}
function countdown() {
// starts countdown
cddisplay();
changeColor(CCOUNT);
if (count === 0) {
// time is up
} else {
count--;
t = setTimeout(countdown, 1000);
$("#onebuttons").attr('disabled', 'disabled');
}
}
function cdpause() {
// pauses countdown
clearTimeout(t);
$("#onebuttons").removeAttr('disabled');
}
function cdreset() {
// resets countdown
cdpause();
count = CCOUNT;
cddisplay();
$("#onebuttons").removeAttr('disabled');
}
function changeColor() {
if (count <= 1000 && count > 29) {
document.getElementById('timespan').style.color = "#00CC00";
} else if (count <= 29 && count > 9) {
document.getElementById('timespan').style.color = "#F87217";
} else if (count <= 9 && count > 3) {
document.getElementById('timespan').style.color = "#ff0000";
} else if (count === 3) {
var audio = document.createElement("audio");
audio.src = "3-2-1-0.m4a";
audio.play();
}
if (count === 0) {
document.getElementById('timespan').style.color = "#ffffff";
}
if (count < 10) {
$("#timespan").fadeOut('slow', function() {
$("#timespan").text(count);
$("#timespan").fadeIn();
});
}
}
yes, just let the call out of the on click method
like this
var CCOUNT;
$(document).ready(function() {
CCOUNT = $('#seconds').val();
cdreset();
});
It will make your method fire at the time the page finnish loads
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);
}
I have a timer that starts counting up when the page is loaded. I want it to stop when the user scrolls to the bottom of the page. Here is the jQuery I've written:
function timerTick(time, stop)
{
if(stop == false)
{
setInterval(function ()
{
time += 1;
var displayTime = time/10;
if(displayTime % 1 != 0)
{
$('.time').text(displayTime.toString());
}
else
{
$('.time').text(displayTime.toString() + ".0");
}
}, 100);
}
else //behavior is the same if i remove the else block
{
return;
}
}
$(document).ready(function () {
var time = 0;
var stop = false;
timerTick(time, stop);
//check if we're at the bottom
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
stop = true;
}
});
});
The timer counts up perfectly, the problem is I can't get it to stop. If I replace the stop = true; line with alert('abc');, the alert shows up when the user reaches the bottom. So all of the pieces are working, just for some reason setting stop to true doesn't stop the timerTick function from going into the if(stop == false) block.
Can someone tell me what I'm doing wrong?
Edit: I made a jsFiddle.
You have to clear interval as soos as user reach the end of page. Otherwise it will continue executing.
Try:
var intervalId;
function timerTick(time, stop)
{
if(stop == false)
{
intervalId=setInterval(function () //Set the interval in a var
{
time += 1;
var displayTime = time/10;
if(displayTime % 1 != 0)
{
$('.time').text(displayTime.toString());
}
else
{
$('.time').text(displayTime.toString() + ".0");
}
}, 100);
}
else //behavior is the same if i remove the else block
{
return;
}
}
$(document).ready(function () {
var time = 0;
var stop = false;
timerTick(time, stop);
//check if we're at the bottom
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
stop = true;
clearInterval(intervalId);//HERE clear the interval
}
});
});
DEMO
to determine bottom of the page you could try this
if(window.innerHeight + document.body.scrollTop >= document.body.offsetHeight) {
stop = true;
}
Update:
you need to make your variable stop global, declare it outside of documnet.ready function.
setInterval function returns number that you can later pass into clearInterval to stop the timer.
Declare
var Timeout=0;
check
if(stop == false)
inside the setInterval function
like
Timeout=setInterval(function ()
{
if(stop == false)
{
time += 1;
var displayTime = time/10;
if(displayTime % 1 != 0)
{
$('.time').text(displayTime.toString());
}
else
{
$('.time').text(displayTime.toString() + ".0");
}
}
else
{
clearInterval(Timeout);
}
}, 100);