Run a For loop then stop - javascript

I want to click on this button and every time the button is clicked, 1 is added but when it gets to 12 I would like it to stop no matter if you continue to click on the button. Here is what I got so far.
<button>Click Me</button>
<script>
$(document).ready(function(){
$('button').click(function(){
for ( var i = 0; i <= 12; i = i + 1 ) {
console.log(i.val()+1);
}
});
});
</script>

like
jQuery(function () {
var counter = 0;
$('button').on('click.counter', function () {
if (++counter == 12) {
$(this).off('click.counter')
}
console.log(counter)
})
})
Demo: Fiddle

You need to put a break point as follows :
$('button').click(function(){
for ( var i = 0; i <= 12; i++ )
{
if(i==12)
{
break; // breaks out of loop completely
}
console.log(i);
}
});
This would totally throw the code out of the for loop when the value comes to 12.

Best way is, once you reach 12 count then DISABLE the Button. So, user will not be able to click it after 12....

Try this,
$(document).ready(function(){
var t=0;
$('button').click(function(){
t = t+1;
if(t>12){
return true;
}
console.log(t);
});
});
DEMO: http://jsfiddle.net/z8m7d/

var t=0;
$('button').click(function(){
if(t++>=12){
return true;
}
});

Related

Select Second child and attribute an ID - Javascript

How can I attribute an ID to the second gs-title?
I try this, but doesn't work:
var stopInterval = false;
var interval = setInterval(function($Document) {
if(!stopInterval) {
$("div > gs-title:nth-child(2)").attr("id",'pweb');
stopInterval = true;
} else {
clearInterval(interval);
}
},12000);
** Resolved **
Second problem:
My automatic click doesn't work to, here's the code:
Looking at the picture of your code I think you are trying target a.gs-title which is inside div.gs-title, for this you can simply change div > gs-title:nth-child(2) to a.gs-title
Here is an exmple:
var stopInterval = false;
var interval = setInterval(function($Document) {
if(!stopInterval) {
$("div > .gs-title:eq(1)").attr("id",'pweb');
stopInterval = true;
document.getElementById('pweb').click();
// or $('#pweb').click();
} else {
clearInterval(interval);
}
},12000);
$('a').click(function(event){
event.preventDefault();
alert($(this).html());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a class="gs-title">1</a>
<a class="gs-title">2</a>
<a class="gs-title">3</a>
<a class="gs-title">4</a>
</div>
Use eq
$("div > .gs-title:eq(1)").attr("id",'pweb');
EDIT
$("#pweb").trigger("click");
let gs_elt = document.getElementsByClassName('gs-title');
Array.prototype.map.call(gs_elt,function(elt,index){
//adding click event
elt.addEventListener("click",function(event){
alert('click event succeded');
})
//setting attribut to the second child
if(index ==1){
elt.setAttribute('id','second_child_attribut');
}
})

Show a number of additional divs on every click

I want to have a sequential list display, where initially all the lis except the first one are hidden, and when the user clicks a button, the lis appear by groups of 3. Eventually I would like to hide the button when the list gets to the end.
The code is something like this, but it shows only one per click, every third - but I want to show also the in-between elements until the third
jQuery(".event-holder:gt(0)").hide();
var i = 0;
var numbofelem = jQuery(".event-holder").length;
jQuery("#allevents").on('click', function(e){
e.preventDefault();
i+=3;
jQuery(".event-holder").eq(i).fadeIn();
if ( i == numbofelem ) { jQuery(this).hide(); }
});
Probably the .eq(i) is not the function I need, but couldn't find the correct one...
You can use :hidden with use of .each() loop:
jQuery("#allevents").on('click', function(e){
e.preventDefault();
jQuery(".event-holder:hidden").each(function(i){
if(i <= 2){
jQuery(this).fadeIn();
}
});
});
Working fiddle
If you have just three you could use :
jQuery(".event-holder:gt(0)").hide();
var i = 0;
var numbofelem = jQuery(".event-holder").length;
var li = jQuery(".event-holder");
jQuery("#allevents").on('click', function(e){
e.preventDefault();
li.eq(i+1).fadeIn();
li.eq(i+2).fadeIn();
li.eq(i+3).fadeIn();
i+=3;
if ( i == numbofelem ) { jQuery(this).hide(); }
});
If you have several lis to show you could use a loop, e.g :
var step = 10; //Define it outside of the event
for(var j=0;j<step;j++){
li.eq(i+j).fadeIn();
}
i+=step;
Hope this helps.
You eq(i) needs to be looped.
jQuery(".event-holder:gt(0)").hide();
var i = 0;
var numbofelem = jQuery(".event-holder").length;
jQuery("#allevents").on('click', function(e){
e.preventDefault();
//i+=3;
//jQuery(".event-holder").eq(i).fadeIn();//You are showing only the third element. Loop this
//Something like this
for(var j=i;j<i+3;j++){
jQuery(".event-holder").eq(i).fadeIn();
if ( i == numbofelem ) { jQuery(this).hide(); }
}
i = j;
});
An alternative approach would be to buffer all the items, and keep adding them until empty:
var holders = $('.event-holder').hide();
$("#allevents").click( function(e){
e.preventDefault();
holders = holders.not(holders.slice(0, 3).fadeIn());
if(holders.length === 0) $(this).hide();
});
Fiddle

If statement does not work when condition is met

Here is my code:
var count = 2;
var decrementAmount = 1;
function reduceVariable() {
count -= decrementAmount;
}
$("#button").click(function() {
reduceVariable();
});
if (count == 0) {
$("#avrageReactionTime").html("Hello");
};
When i click my button twice the div that has the id avrageReactionTime does not change to have the text hello. Why do i have this problem...
Right now you test once, instead of testing every time the counter changes.
You must put the if inside the event handler :
$("#button").click(function() {
reduceVariable();
if (count==0) {
$("#avrageReactionTime").html("Hello");
}
});
Note that properly indenting your code makes it obvious.

Can't execute a jQuery function more than once

I have the following function:
$('#edit').on("click", function () {
$('#edit').text('click1');
$('table a').click(function (e) {
e.preventDefault();
});
$('table a').css("cursor", "default");
}
});
$('#edit').click(function () {
$('#edit').unbind();
$('#edit-message-placeholder').empty();
$('#edit').text('click2');
$("table tbody").sortable("disable");
$('table a').unbind()
$('table a').css("cursor", "auto");
});
});
On first click, I want it to change the text of div#edit. On second click, it will change the text to something else. On third click, the function will behave as though it was clicked the first time.
I tried to find a solution online, but found nothing useful.
The problem is that you're approaching this incorrectly. You don't need to bind/unbind event handlers. You only need one event handler that alternates in functionality:
JavaScript
var isOkay = true;
$("p").click(function () {
if (isOkay) {
$(this).text("1st click");
} else {
$(this).text("2nd click");
}
isOkay = !isOkay;
})
HTML
<p>Click me!</p>
Every time the <p> is clicked, it performs an action and then switches the value of a boolean variable, isOkay. This means that it will alternate between the if and else block. Note that the isOkay variable is held outside the scope of the $("p").click(...) event handler.
fiddle
Try this -
Use the data property to temporarily save the counter data
<button id="edit" data-count="1">1</button>
function doWork(val){
alert(val);
};
$('#edit').on("click", function () {
if($(this).data('count') == ""){
$(this).data('count') = 1;
}
var count = parseInt($(this).data('count'));
if (count == 1){
doWork(count);
}else if (count == 2){
doWork(count);
}else if (count == 3){
doWork(count);
}
count += 1
count = count >= 4 ? 1: count;
$(this).data('count', count);
$(this).html($(this).data('count'));
});
Here is the jsfiddle - http://jsfiddle.net/pt3zE/1/

How to use zIndex on textField, so i can move to other textField when i press next in Titanium?

does anyone know how to do that? i have this code :
var txtOne = Titanium.UI.createTextField({
top:50,
zIndex:1
});
var txtTwo = Titanium.UI.createTextField({
top:100
});
var txtThree = Titanium.UI.createTextField({
top:150,
zIndex:2
});
all i want is to jump from txtOne to txtThree without go to txtTwo..
I try to use zIndex but it not works for me..
any idea?? thanks
you could put them into an array, and assign them event handlers for their return functions like this:
var textFields = [txtOne, txtTwo, txtThree];
for(vat i=0; i < textFields.length; i++)
{
//make the last text field jump to the first one when returning
if(i == textFields.length-1)
{
textFields [i].addEventListener('return', function(e)
{
textFields[0].focus();
});
}
else
{
//jump to the next text fields when returning
textFields [i].addEventListener('return', function(e)
{
textFields[i+1].focus();
});
}
}

Categories

Resources