Develop Reference

World's most persistent bouncing

I used the same algorithm for an earlier part of the code, used a basic de-bouncer on the functions, and it worked, like so:
var lastClick = 0;
var delay = 20;
function l_mage_menu(){
if (lastClick >= (Date.now() - delay))
return;
lastClick = Date.now()
But for this it refuses to work and everything is running 3+ times, whether it's the alert window or the function being called. Cannot for the life of me figure out why.
document.addEventListener("DOMContentLoaded", (function(event) {
var buttons = document.querySelectorAll('.btn');//this acts like an array
if (buttons){
buttons.forEach(function getIndex(curVal2, LIndex2){ //current value and index in the list
curVal2.addEventListener('click', function() {
curVal2.classList.toggle("active2");
buttons.forEach(function(x, sL2){
if(LIndex2 !== sL2) { //if list index is NOT equal to the selected list element, aka one has already been picked
x.classList.remove('active2');
};
current_index2 = LIndex2;
switch(current_index2){
case(0): //basic attack.
console.log("test1") //from here, call the menus
break;
case(1): //this one is spells
//use listener to execute the matching spell
let btn1 = document.getElementById("btn_1");
btn1.addEventListener("click", function(){
if(btn1.innerHTML == "Supreme Altar"){
let ultima = document.getElementById('ultima_charge');
if (ultima.value != 100){
window.alert("Ultima not charged!");
}else{
SupremeAltar()
}
}
else if (btn1.innerHTML == "Radiant Supernova"){
let ultima = document.getElementById('ultima_charge');
if (ultima.value != 100){
window.alert("Ultima not charged!");
}else{
RadiantSupernova()
}
}else if (btn1.innerHTML == "Thousand Men"){
let ultima = document.getElementById('ultima_charge');
if (ultima.value != 100){
window.alert("Ultima not charged!");
}else{
ThousandMen()
};
};
})
};
});
});
});
};
}));

How to move on from one item at a time through an array? (no setInterval)

I am making a quiz. How would I be able to make the user, after they answer the question by clicking a button in the multiple choice answer, move onto the next question in the same container div?
function runQuizQuestions() {
// shuffling questions
let theQuestions = shuffle(myQuestions);
console.log('shuffled Questions');
for (let i = 0; i < myQuestions.length; i++) {
// fill in the questions HTML
document.querySelector('#quizQ').innerText = myQuestions[i].question;
document.querySelector('#a1').innerText = myQuestions[i].answer1;
document.querySelector('#a2').innerText = myQuestions[i].answer2;
document.querySelector('#a3').innerText = myQuestions[i].answer3;
document.querySelector('#a4').innerText = myQuestions[i].answer4;
// store correct answer
rightAnswer = myQuestions[i].correct;
// clicking inside the container
let quizContainer = document.querySelector('#quiz');
quizContainer.addEventListener("click", function (event) {
event.preventDefault;
let answerClick = event.target;
console.log(`you clicked on:`, answerClick);
if (answerClick.matches("button")) {
// store button's value
let answer = answerClick.innerText;
// check answer
if (answer === rightAnswer) {
document.querySelector('#result').innerText = "Correct!";
document.querySelector('#result').classList.remove('d-none', 'alert-danger');
setTimeout(function () { document.querySelector('#result').classList.add('d-none', 'alert-danger'); }, 2000);
console.log('right answer');
} else {
document.querySelector('#result').innerText = "Wrong!";
document.querySelector('#result').classList.remove('d-none', 'alert-success');
setTimeout(function () { document.querySelector('#result').classList.add('d-none', 'alert-success'); }, 2000);
console.log('wrong answer');
}
}
// move on to next question.
})
}

Why is this function youWin not working properly?

I believe I'm posting all of the relevant code here.
The function definitely does run because if I switch the > to a < it gives me the alert when I click on the 'moveup' button.
Also, the console logs that pic2 continues to grow with each increment and pic3 stays the same. So that part is working.
Something in the function just isn't comparing the two variables properly and I can't figure out what's wrong.
var player = document.getElementById("pic2").offsetLeft;
var finish = document.getElementById("pic3").offsetLeft;
console.log(player);
console.log(finish);
function youWin() {
if (player >= finish) {
alert("You Win!");
} else {
}
};
$(function() {
$('#moveup').click(function() {
$("#pic2").css('margin-left', '+=2vw');
$("#pic3").css('margin-left', '-=2vw');
document.getElementById("guessField").value = "";
$('#myModalTrue').toggle();
y = regenerate();
var player = document.getElementById("pic2").offsetLeft;
var finish = document.getElementById("pic3").offsetLeft;
console.log(player);
console.log(finish);
youWin();
});
});

you aren't changing the global player and finish variable. you are making new local ones. for more information about variable scope in javascript. try this
var player = document.getElementById("pic2").offsetLeft;
var finish = document.getElementById("pic3").offsetLeft;
console.log(player);
console.log(finish);
function youWin() {
if (player >= finish) {
alert("You Win!");
} else {
}
};
$(function() {
$('#moveup').click(function() {
$("#pic2").css('margin-left', '+=2vw');
$("#pic3").css('margin-left', '-=2vw');
document.getElementById("guessField").value = "";
$('#myModalTrue').toggle();
y = regenerate();
player = document.getElementById("pic2").offsetLeft;//change is here
finish = document.getElementById("pic3").offsetLeft;//and here
console.log(player);
console.log(finish);
youWin();
});
});

Try logging values inside the youWin function it should return old values and your answer. Your player and finish values are not updating for function. It is still getting old values.
function youWin(player, finish) {
if (player >= finish) {
alert("You Win!");
} else {
}
};
$(function() {
$('#moveup').click(function() {
$("#pic2").css('margin-left', '+=2vw');
$("#pic3").css('margin-left', '-=2vw');
document.getElementById("guessField").value = "";
$('#myModalTrue').toggle();
y = regenerate();
var player = document.getElementById("pic2").offsetLeft;
var finish = document.getElementById("pic3").offsetLeft;
console.log(player);
console.log(finish);
youWin(player, finish);
});
});

My tic tac toe game (jquery) is not working properly. Lost Part is not working properly

The 'Win' and 'Draw' parts are showing up on time, but the 'Lost' part doesn't show the message 'you lost'until I click on an empty cell once again. Please check out my code and help me find any errors.
Below is my code:
Marked is a class that changes the opacity of the clicked cell.
1,2,3...are the id's of respective cells in the table(html).
I tried delay() too instead of setTimeout(), but it didn't work as well.
$(document).ready(function() {
var timer;
var x = 0;
$("td").click(function() {
if($(this).text()=='') {
$(this).text("0").addClass("marked");
x = 1;
}
}).click(function() {
if(x==1) {
timer = setTimeout(function() {
var choose = $("td").not(".marked");
var random = choose[Math.floor(Math.random()*choose.length)];
$(random).text("X").addClass("marked");
},1000);
x=0;
showResult();
}
});
function showResult() {
var one = $("#1").text();
var two = $("#2").text();
var three = $("#3").text();
var four = $("#4").text();
var five = $("#5").text();
var six = $("#6").text();
var seven = $("#7").text();
var eight = $("#8").text();
var nine = $("#9").text();
if(one==two && two==three)
result(one)
else if (four==five && five==six)
result(four)
else if(seven==eight && eight==nine)
result(seven)
else if (one==four && four==seven)
result(one)
else if (two==five && five==eight)
result(two)
else if (three==six && six==nine)
result(three)
else if (one==five && five==nine)
result(one)
else if(three==five && five==seven)
result(three);
else {
var z = $("td").not(".marked");
if(z.length == 0) {
$("p").text("Draw!");
$("td").removeClass("marked");
$("td").text("");
$("#demo1").append('<img src="https://media.tenor.com/images/54c63f726505bfdb455eb4c29e626ad8/tenor.gif">');
clearTimeout(timer);
}
}
}
function result(y) {
var result = y;
if(result=="X"){
clearTimeout(timer);
$("p").text("You Lost!");
$("td").removeClass("marked");
$("td").text("");
$("#demo1").append('<img src="https://media.tenor.com/images/08902a85a6107684f8614846f4a54218/tenor.gif">');
}
if(result=="0") {
$("td").text("");
$("p").text("You Won!");
$("#demo1").append('<img src="https://i.gifer.com/4OuC.gif">');
$("td").removeClass("marked");
clearTimeout(timer);
}
}
});

You are calling showResult immeadiately when the user clicked, so it cant't recognize the X put into the table one second later.
Just do:
$("td").click(function() {
[...]
}).click(function() {
if (x == 1) {
timer = setTimeout(function() {
var choose = $("td").not(".marked");
var random = choose[Math.floor(Math.random() * choose.length)];
$(random).text("X").addClass("marked");
/******** ADD ANOTHER CHECK HERE ********/
showResult();
}, 1000);
x = 0;
showResult();
}
});
It might also be a good idea to add a return to showResult that returns false when a result was achieved. This way you could do something like
x = 0;
if (showResult()) {
timer = setTimeout(function() {
[...]
}
}
And the user can't get a loose message right after a win message.
Also: Why do you need the 2 click listeners? You can just use the if statement in the top one and then you don't need the (x == 1)

jQuery not responding to timed events

Im having trouble getting my second function to react to the changes the first function brings.
var jumbotron = function(){
var jumbotronCounter = 1
var jumbotronSwitch = function(){
var jumbotronTimer = function(){
jumbotronCounter++
}
jumbotronTimer();
if (jumbotronCounter > 3){
jumbotronCounter = 1
}
console.log(jumbotronCounter);
}
setInterval(jumbotronSwitch,7000);
var jumbotronListener = function(){
if(jumbotronCounter = 1){
console.log('first');
}else if(jumbotronCounter = 2){
console.log('second');
}else if(jumbotronCounter = 3){
console.log('third');
}
};
jumbotronListener();
}
jumbotron();
Id like to use "jumbotronListener" to run some code when "jumbotronCounter" changes

jumbotronListener is indeed only running once. You can, instead, run it every time the interval runs:
var jumbotron = function () {
var jumbotronCounter = 1;
var jumbotronSwitch = function () {
var jumbotronTimer = function () {
jumbotronCounter++;
};
jumbotronTimer();
if (jumbotronCounter > 3) {
jumbotronCounter = 1;
}
// Execute the listener every time the interval runs
jumbotronListener();
console.log(jumbotronCounter);
};
setInterval(jumbotronSwitch, 7000);
// Run for the first time if you wish:
jumbotronListener();
// Set this as function so you can 'use it before declaring it'
function jumbotronListener() {
// You had invalid operators. = assigns and === compares (strictly)
if(jumbotronCounter === 1) {
console.log('first');
} else if(jumbotronCounter === 2) {
console.log('second');
} else if(jumbotronCounter === 3) {
console.log('third');
}
}
};
jumbotron();
You also had some missing semicolons in there, sometimes it's not a problem since JavaScript auto-inserts them, but sometimes it is, so it's a good idea to always make sure to manually insert them where they go.