I have been trying for a good minute to figure out why my if statement never triggers. Any help would be much appreciated!
var clickcounter = 0;
var buttonclicker = document.getElementById("buttonclicker");
function unblur() {
clickcounter = clickcounter + 1;
console.log(clickcounter);
}
if (clickcounter === 1) {
buttonclicker.textContent = "Unlock More";
alert(clickcounter);
}
the variable clickcounter will be equal to or over 1. I at first tried using if (clickcounter => 1) and also tried if (clickcounter > 0) but none of this worked. What am I doing wrong?
Here is a codepen of the whole thing: https://codepen.io/sage379/pen/JyppZv
Based on your code example, unblur() never gets called so clickcounter remains 0.
Please try with the below code snippet. Let me know if i did not understand your requirement.
var clickcounter = 0;
var buttonclicker = document.getElementById("buttonclicker");
function unblur() {
clickcounter = clickcounter + 1;
console.log(clickcounter);
if (parseInt(clickcounter) >= 1){
buttonclicker.textContent = "Unlock More";
}
}
Put your if statement inside of unblur:
var clickcounter = 0;
var buttonclicker = document.getElementById("buttonclicker");
function unblur() {
clickcounter = clickcounter + 1;
console.log(clickcounter);
if (clickcounter === 1) {
buttonclicker.textContent = "Unlock More";
alert(clickcounter);
}
}
The problem is that once you increment clickcounter, you never check if it's changed. That check is performed once in your script, immediately after setting clickcounter = 0.
Here is an example where I've wrapped that check in a new function called checkClickCounter(). This function is called in unblur() each time it is called by your button click. I changed your if statement back to >= but since you're incrementing by one it will always return true after one click using === so this change doesn't matter in your current code.
var clickcounter = 0;
var buttonclicker = document.getElementById("buttonclicker");
function unblur() {
clickcounter = clickcounter + 1;
checkClickCounter(clickcounter);
}
function checkClickCounter(count){
if (count >= 1) {
buttonclicker.textContent = "Unlock More";
//alert(clickcounter);
}
}
Related
I have a code which I am trying to execute using a parameter in the function, i.e -
function startFadeEffect(elem){ };
I have made the elem equal to a variable b in the global scope, where b is an array of images. Meaning -
var elem = b[imgNumb];
imgNumb is a variable which is globally "0" and inside a function is defined as
imgNumb = imgNumb + count;
Now, my current code "without" the parameter works perfect -
function startFadeEffect(){
var opacSetting = noOpac / 10;
b[imgNumb].style.opacity = opacSetting;
b[imgNumb].style.display = "block";
noOpac++;
if(noOpac < 0){
opacSetting = 0;
}
if(opacSetting == 1){
clearTimeout(timer);
b[imgNumb].style.opacity = 1;
noOpac = 0;
return false;
}
var timer = setTimeout(startFadeEffect, 75);
}
However, when I use the parameter like this it does not work for me :(
function startFadeEffect(elem){
var opacSetting = noOpac / 10;
elem.style.opacity = opacSetting;
elem.style.display = "block";
noOpac++;
if(noOpac < 0){
opacSetting = 0;
}
if(opacSetting == 1){
clearTimeout(timer);
elem.style.opacity = 1;
noOpac = 0;
return false;
}
var timer = setTimeout(startFadeEffect(elem), 75);
}
Please note I have already defined the elem variable in the global scope of the file. Also, I am only looking for a JS solution no library like JQuery! Thanks
This part is incorrect:
setTimeout(startFadeEffect(elem), 75);
It should be:
setTimeout(function () {
startFadeEffect(elem);
}, 75);
setTimeout expects a function as it's first argument. startFadeEffect(elem) is executed immediately (and doesn't return a function). So what happens is that startFadeEffect calls itself recursively until opacSetting == 1 which breaks the recursion.
I am building a website and the homepage will basically have 2 div's containing text. I want one of the divs to change every 2 seconds with values I've placed in an array
var skills = ["text1","text2","text3","text4"];
var counter = 0;
var previousSkill = document.getElementById("myGreetingSkills");
var arraylength = skills.length - 1;
function display_skills() {
if(counter === arraylength){
counter = 0;
}
else {
counter++;
}
}
previousSkill.innerHTML = skills[counter];
setTimeout(display_skills, 2000);
innerHTML is evil, use jQuery! (assuming because you have it selected as a tag)
Working fiddle
(function($) {
$(function() {
var skills = ["text1","text2","text3","text4"],
counter = skills.length - 1,
previousSkill = $("#myGreetingSkills"),
arraylength = skills.length - 1;
function display_skills() {
if (counter === arraylength) {
counter = 0;
}
else {
counter++;
}
previousSkill.html(skills[counter]);
}
display_skills();
setInterval(function() {
display_skills();
}, 2000);
});
})(jQuery);
You need to wrap display_skills inside a function in your setTimeout() and use setInterval() instead.
var myInterval = setInterval(function(){display_skills()}, 2000);
And make sure you call previousSkill.innerHTML = skills[counter]; inside your interval'd function - else it will run just once.
You can terminate your interval with window.clearInterval(myInterval);
Use array.join().
The syntax of this function is array.join(string), where3 string is the joining character.
Example:
[1, 2, 3].join(" & ") will return "1 & 2 & 3".
Hope this helps,
Awesomeness01
I have a full width slideshow. So I have a few problems with it.
One is that clearTimeout won't work. If I call the function by a click, it should clear the Timeout.
Does someone know why this won't work? Please explain and show where exactly the problem is.
Thank you and sorry for my bad English.
var index = 0;
var slideSpeed = 1000;
function mainSlider(menuLink){
clearTimeout(slide);
if(menuLink !== false){
alert('You call this function by a click event.');
clearTimeout(slide);
}
var sliderIndex = $('.main_slider_content').length - 1;
$('.main_slider_content').hide();
index++;
if(index > sliderIndex){
index = 0;
}
$('.main_slider_content:eq(' + index + ')').show();
var slide = setTimeout(function(){mainSlider(false)}, slideSpeed);
setTimeout(countContentImg(index), slideSpeed);
}
$(document).on('click', '.main_slider_menu_link',function(){
var linkIndex = $(this).index();
mainSlider(linkIndex);
});
function countContentImg(index){
$('#main_slider_selected_img').html('');
var sliderIndex = $('.main_slider_content').length;
for(var i = 0; i < sliderIndex; i++) {
if(i === index)
$('#main_slider_selected_img').append('<li class="main_slider_menu_link main_slider_menu_link_slected"></li>');
else
$('#main_slider_selected_img').append('<li class="main_slider_menu_link"></li>');
}
}
$(document).ready(function(){
countContentImg(index);
mainSlider(false);
});
This looks like a scope issue. You're trying to clear a timeout from a variable that doesn't contain a timeout reference yet. Each call to mainSlider creates a new, locally scoped timeout reference, long after you've tried to clear it.
function mainSlider(menuLink){
clearTimeout(slide); // Clearing a timeout that doesn't exist yet
if(menuLink !== false){
alert('You call this function by a click event.');
clearTimeout(slide); // Clearing a timeout that doesn't exist yet
}
var sliderIndex = $('.main_slider_content').length - 1;
$('.main_slider_content').hide();
index++;
if(index > sliderIndex){
index = 0;
}
$('.main_slider_content:eq(' + index + ')').show();
// Now the timeout exists, but only in the scope of this current call
var slide = setTimeout(function(){mainSlider(false)}, slideSpeed);
setTimeout(countContentImg(index), slideSpeed);
}
Change it to:
var slide;
function mainSlider(menuLink){
clearTimeout(slide);
if(menuLink !== false){
alert('You call this function by a click event.');
clearTimeout(slide);
}
var sliderIndex = $('.main_slider_content').length - 1;
$('.main_slider_content').hide();
index++;
if(index > sliderIndex){
index = 0;
}
$('.main_slider_content:eq(' + index + ')').show();
// Remove var
slide = setTimeout(function(){mainSlider(false)}, slideSpeed);
setTimeout(countContentImg(index), slideSpeed);
}
So here's the code snippet
$(document).ready(function () {
var dmg = 60;
var curr_hp = 1200;
var tot_hp = 1200;
$('#attk_spd').text('1.2 seconds');
$('#dmg').text('60');
$('#curr_hp').text('1200');
$('#tot_hp').text('1200');
var dps_timer;
var attacking = 0;
$("#btn").click(function () {
if (dps_timer) {
// We're already waiting for the next attack, so do nothing
return;
}
$('#attk').text('You are currently attacking your target.');
$('#btn').val('Retreat');
var attack_once = function () {
// Always attack immediately
curr_hp -= dmg;
$('#curr_hp').text(curr_hp);
if (curr_hp > 0) {
dps_timer = setTimeout(attack_once, 1200);
} else if (attacking == 1) {
clearTimeout(attack_once);
attacking = 0;
alert(attacking);
$('#attk').text('You have retreated from battle.');
$('#btn').val('Attack');
} else {
attacking = 0;
alert(attacking);
$('#attk').text('Your target has been destroyed.');
$('#btn').val('Attack');
}
}
if (attacking == 0) {
attack_once();
attacking = 1;
alert(attacking);
}
});
});
I have alerts set up to check that the values are changing. This is basically a button click function. So when i click the button the first time the attacking starts and the button changes to retreat. However when i click retreat, the function should be executed again checking the conditionals, the attacking variable is set to 0 initially, changes to 1 when you click attack. So that if you click attack again it will run the second 'else if' conditional, but it doesn't. Help!
Code in action right here: http://www.evenstar-online.com/Jquery_snippets/dpsloop.php
attacking can never be 1 when attack_once is called because your if statement requires it to be 0 to run.
if (attacking == 0) {
//attacking is 0 when `attack_once()` is called
attack_once();
attacking = 1;
alert(attacking);
}
var attack_once = function () {
//.....
// this can never be 1
} else if (attacking == 1) {
Solution: Move your attacking = 1 up above the attack_once(); line
if (attacking == 0) {
attacking = 1;
attack_once();
alert(attacking);
}
I have a problem, I have 3 button lets say it's called #pos1, #pos2 and #pos3.
I want to makes it automatically click #pos1 button in 2 seconds, after that click the #pos2 after another 2 seconds, and #pos3 after another 2 seconds,
after that back to the #pos1 in another 2 seconds and so on via jQuery.
HTML
<button id="pos1">Pos1</button>
<button id="pos2">Pos2</button>
<button id="pos3">Pos3</button>
Anyone can help me please?
Try
$(function() {
var timeout;
var count = $('button[id^=pos]').length;
$('button[id^=pos]').click(function() {
var $this = $(this);
var id = $this.attr('id');
var next = parseInt(id.substring(4), 10) + 1;
if( next >= count ){
next = 1
}
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(function() {
$('#pos' + next).trigger('click');
}, 2000);
})
timeout = setTimeout(function() {
$('#pos1').trigger('click');
}, 2000);
})
var posArray = ["#pos1", "#pos2", "#pos3"];
var counter = 0;
setInterval(function() {
$(posArray[counter]).triggerHandler('click');
counter = ((counter<2) ? counter+1 : 0);
}, 2000);
That should do the trick, though you did not mention when you want it to stop running.
Well I don't know what you already have but technically it could be done via triggerHandler()
var currentPos = 1,
posCount = 3;
autoclick = function() {
$('#pos'+currentPos).triggerHandler('click');
currentPos++;
if(currentPos > posCount) { currentPos = 1; }
};
window.setInterval(autoclick,2000);
If I have understood you question right, you need to perform click in a continuous loop in the order pos1>pos2>pos3>pos1>pos2 and so on. If this is what you want, you can use jQuery window.setTimeout for this. Code will be something like this:
window.setTimeout(performClick, 2000);
var nextClick = 1;
function performClick() {
if(nextClick == 1)
{
$("#pos1").trigger("click");
nextClick = 2;
}
else if(nextClick==2)
{
$("#pos2").trigger("click");
nextClick = 3;
}
else if(nextClick == 3)
{
$("#pos3").trigger("click");
nextClick = 1;
}
window.setTimeout(performClick, 2000);
}
This is quite buggy but will solve your problem.
using setInterval()
Calls a function or executes a code snippet repeatedly, with a fixed time delay between each call to that function.
var tempArray = ["pos1", "pos2", "pos3"]; //create an array to loop through
var arrayCounter = 0;
setInterval(function() {
$('#' + tempArray[arrayCounter ]).trigger('click');
arrayCounter = arrayCounter <2 ? arrayCounter +1 : 0;
}, 2000);
fiddle here
check your console for fiddle example