I'm having problems creating a global variable and resetting it through jquery. here is my code
var x = 1;
$(document).ready(function () {
$("#button").click(function () {
if(x === 1) {
alert("test1");
var x = 2;
} else if(x === 2) {
alert("test2");
var x = 3;
} else {
alert("test 3");
}
});
});
I want to be able to click the same button three times and have all the tests appear, but instead it goes straight to the last option "test 3". I apologize if this is a silly question, but I'm a bit new to jquery and javascript.
Just remove the var from the variable assignment inside the click event callback. The var makes the variable local to that scope/closure.
if (x === 1) {
alert("test1");
x = 2;
}
else if (x === 2) {
alert("test2");
x = 3;
}
else {
alert("test 3");
}
As a side point the very first var is not necessary, var x = 1 and x = 1 does the same thing when the code is not in a closure/function. All they are doing is assigning window.x = 1.
Related
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()
};
};
})
};
});
});
});
};
}));
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)
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.
I have a slider function, which works perfectly fine with moveRight() but I am stuck, and can use it only once.
I decided to use a condition to disable the move function and change the attributes of links on the second click. My code below:
$('#control_next').click(function () {
var used = 0;
if (used == 0) {
moveRight();
used = 1;
} else if (used == 1) {
$('.control_next').attr('href', '#business-events');
$('.control_next').addClass( "url" );
}
alert(used);
});
You have to place the varaible used outside your event handler because else it will always be 0 with every click:
var used = 0;
$('#control_next').click(function () {
if (used == 0) {
moveRight();
used = 1;
}
else if (used == 1) {
$('.control_next').attr('href', '#business-events');
$('.control_next').addClass( "url" );
}
alert(used);
});
You should declare variable Globally. Like
var used = 0;
$('#control_next').click(function () {
if (used == 0) {
moveRight();
used = 1;
}
else if (used == 1) {
$('.control_next').attr('href', '#business-events');
$('.control_next').addClass( "url" );
}
});
Good day all, I'm trying to make a jquery game where a group of enemy will spawn after a group of enemy gets destroyed. I'm calling alien_cruiser() function & unbinding minion_roulette() function after minion_roulette_counter gets 0. But every time I run, function does not get unbind & after counter gets 0 both type of enemies show. I want to run them one by one. Here are the codes:
var sound = new Audio("sounds//dishoom.ogg");
var score = 0;
var minion_roulette_life = 10;
var cruiser_life = 20;
var minion_roulette_counter = 3;
var cruiser_counter = 3;
function processBullet() {
$(".projectile").each(function() {
var maxTop = $(this).offset().top;
var breakable1 = $(this).collision("#minion-roulette");
var breakable2 = $(this).collision("#cruiser");
$(this).css("top", maxTop - 25);
if (breakable1.length != 0 || breakable2.length != 0) {
$(this).remove();
}
if (maxTop <= 35) {
$(this).remove();
}
if (breakable1.length != 0) {
--minion_roulette_life;
if (minion_roulette_life == 0) {
sound.play();
breakable1.remove();
minion_roulette(true);
minion_roulette_counter--;
$("#score").html(++score);
minion_roulette_life = 10;
}
}
//This is the place where it checks if counter is 0 or not
if (minion_roulette_counter == 0) {
$('#content').unbind(function() {
minion_roulette(false)
});
alien_cruiser(false);
minion_roulette_counter = -1;
}
if (breakable2.length != 0) {
--cruiser_life;
if (cruiser_life == 0) {
sound.play();
breakable2.remove();
alien_cruiser(true);
$("#score").html(++score);
cruiser_life = 20;
}
}
});
}
Am I doing any wrong here? Please I need a solution badly. Tnx.
In this situation, you could use a conditional statement to determine which function to call.
For example:
if (minion_roulette_counter == 0) {
alien_cruiser();
}
else {
minion_roulette();
}
Binding and unbinding doesn't 'turn off' a function, unfortunately. To quote MDN:
The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
– MDN: 'Bind'