Develop Reference

How reset the one() function on an object?

I had 6 circles. I'm trying to prevent my users to click NOT in order from 1-6, from left-right.
Ex : Users should not allow clicking on the 2nd or 3rd one if they not yet clicked on the first one.
I have access to the index of all those circles.
if(steps.indexOf(selector) != 0){
alert("Please start by selecting your device.");
return false;
}
Since my circles click bind using a one() so it only listening to an event one time only, after they click on a wrong order, my alert pop up, BUT when I click on the same circle again, nothing will happen anymore since the circle bind using one() function.
Is there a way to reset the one() on a $(this) object so that way it will listen to an event again?
$('.' + selector).on("click", function() {
...
});
How reset the one() function on an object - jQuery ?

Don't add a one time listener, instead add an all time listener, and solve your problem using business logic. For example like this example:
const $first = document.getElementById('first'),
$second = document.getElementById('second'),
$third = document.getElementById('third');
function makeOrderedClick() {
let currentStep = 0;
return index => {
if (index !== currentStep) {
alert("Please click step" + currentStep);
return;
}
currentStep++;
};
}
const orderedClick = makeOrderedClick();
$first.addEventListener('click', e => {
orderedClick(0);
})
$second.addEventListener('click', e => {
orderedClick(1);
})
$third.addEventListener('click', e => {
orderedClick(2);
})
<div id="app">
<button id="first">
First
</button>
<button id="second">
Second
</button>
<button id="third">
Third
</button>
</div>

// index of the button that is supposed to be clicked
var curIdx = 0;
// get all the buttons present in the page
const $buttons = document.getElementsByTagName('button');
// iterate all the buttons
for (let idx = 0; idx < $buttons.length; idx++)
{
// add Event Listener to each button
$buttons[idx].addEventListener('click', e => {
// is the index of the button the same as the control var?
if (idx === curIdx) {
curIdx++;
console.log('correct index');
}
else
{
alert('not the correct index');
}
});
}
<div id="app">
<button id="first">
First
</button>
<button id="second">
Second
</button>
<button id="third">
Third
</button>
</div>

How to make a function run before a button can be pressed again in JS?

I'm trying to write a program in JavaScript in which certain functions must be performed before a button can be pressed again.
The button performs a function that should only be performed once per turn, but I want other actions to be performed before the next turn, and to have a sort of confirmation before progressing to the next turn. In psuedocode it might look something like this:
buttonFunction();
actionOne();
actionTwo();
turnOverConfirm();
etc.
But I'm not so sure how to do that. Right now the button can be pressed at any time. How do I make it so that the user must confirm before the button can be pressed again?

You can disable and enable buttons via javascript. You could block it like that:
document.getElementById("button").disabled = true
Just set it to false again to make it clickable again!

You can use the javascript confirm function. This function will popup a message box with ok and cancel
Here is an example
var r = confirm("Press a button!");
if (r == true) {
alert("OK was clicked");
} else {
alert("Cancel was clicked");
}
What you can do is when a user clicks on a button, popup a confirm box, then if they click ok you can then run the function you listed above.

There are few ways
You can hide the button till processing is ready or replace with an "please wait..." image
You can create an prevent varaible or remove temporary click event function
var Action = (function(){
var prevent = false;
function _start() {
if (prevent === false) {
prevent = true;
_process();
}
}
function _process() {
// DO Action
prevent = false;
}
return { start: _start }
})();
Fire

you can make event for evry click here is an example with alert and change button color all in one function
var clicked = 0;
var btn = document.getElementById("btn");
function clickBtn(){
if (clicked == 0) {
alert("it's first click");
btn.style.background = "black";
clicked = 1;
}else if (clicked == 1) {
alert("it's second click");
btn.style.background = "orange";
clicked = 2;
} else if (clicked == 2) {
alert("it's third click");
btn.style.background = "green";
clicked = 3;
}
}
#btn{
border-radius:15px 0 15px 0;
color:white;
border:none;
padding:15px;
background:blue;
font-weight:bold;
}
#btn:hover{
border-radius:0 15px 0 15px;
}
<button id="btn" onclick="clickBtn()">Click Me</button>

Function activate after two onclicks

Hey I'm using javascript+html only.
Is there any way to activate a function after the button has been clicked two (or more) times? I want the button to do NOTHING at the first click.

For a "doubleclick", when the user quickly presses the mouse button twice (such as opening a program on the desktop), you can use the event listener dblclick in place of the click event.
https://developer.mozilla.org/en-US/docs/Web/Reference/Events/dblclick
For a quick example, have a look at the below code. http://jsfiddle.net/jzQa9/
This code just creates an event listener for the HTMLElement of "item", which is found by using getElementById.
<div id="item" style="width:15px;height:15px;background-color:black;"></div>
<script>
var item = document.getElementById('item');
item.addEventListener('dblclick',function(e) {
var target = e.target || e.srcElement;
target.style.backgroundColor = 'red';
},false);
</script>
As for wanting the user to click an element X times for it to finally perform an action, you can do the following. http://jsfiddle.net/5xbPG/
This below code works by adding a click tracker to the HTMLElement and incrementing the click count every time it's clicked. I opted to save the clicks to the HTMLElement instead of a variable, but either way is fine.
<div id="item" style="width:15px;height:15px;background-color:black;"></div>
<script>
var item = document.getElementById('item');
item.addEventListener('click',function(e) {
var target = e.target || e.srcElement;
var clicks = 0;
if(target.clicks)
clicks = target.clicks;
else
target.clicks = 0;
if(clicks >= 4) {
target.style.backgroundColor = 'red';
}
target.clicks += 1;
},false);
</script>
== UPDATE ==
Since you recently posted a comment that you want two different buttons to be clicked for an action to happen, you would want to do something like this... http://jsfiddle.net/9GJez/
The way this code works is by setting two variables (or more) to track if an element has been clicked. We change these variables when that item has been clicked. For each event listener at the end of changing the boolean values of the click state, we run the function checkClick which will make sure all buttons were clicked. If they were clicked, we then run our code. This code could be cleaned up and made to be more portable and expandable, but this should hopefully get you started.
<input type="button" id="button1">
<input type="button" id="button2">
<div id="result" style="width:15px;height:15px;background-color:black;"></div>
<script>
var result = document.getElementById('result');
var button1 = document.getElementById('button1');
var button2 = document.getElementById('button2');
var button1Clicked = false;
var button2Clicked = false;
button1.addEventListener('click',function(e) {
button1Clicked = true;
checkClick();
},false);
button2.addEventListener('click',function(e) {
button2Clicked = true;
checkClick();
},false);
function checkClick() {
if(button1Clicked && button2Clicked) {
result.style.backgroundColor = 'red';
}
}
</script>

Two ways you can do this, one would be to have a data attribute within the html button that identifies whether the click has been done.
<button id="btn">Click Me!</button>
<script>
var clickedAlready = false;
document.getElementById('btn').onclick = function() {
if (clickedAlready) {
//do something...
}
else
clickedAlready = true;
}
</script>
While global variables aren't the best way to handle it, this gives you an idea. Another option would be to store the value in a hidden input, and modify that value to identify if it's the first click or not.

Maybe something like this?
var numberTimesClicked = 0;
function clickHandler() {
if (numberTimesClicked > 0) {
// do something...
}
numberTimesClicked++;
}
document.getElementById("myBtn").addEventListener("click", clickHandler);

Why is this JavaScript if statement always returning true?

I am trying to execute a block of code when a div is clicked for the first time, and then a different block when it is clicked the second time. My alert shows that the variable is being changed within the first block, but the first code block always executes.
If I change the variable manually, I can get the second block to execute.
var clickCount = 0;
// code for first click
if ( clickCount === 0 ){
$( '.link' ).click(function(){
alert( 'first click. clickCount = ' + clickCount );
clickCount = 1;
});
}
// code for second click
if ( clickCount === 1 ){
$( '.link' ).click(function(){
alert( 'first click. clickCount = ' + clickCount ); // never executes
// stuff
});
}

Your code says:
If the variable is 0
attach a click handler to the link which fires every time the link is clicked
That click handler stays there, even after the variable has changed. The condition is only evaluated once and the click handler is only attached once, but that's all that's necessary to keep triggering the attached click handler every time the link is clicked henceforth.
The second block is never executed, unless you run this whole block of code again that attaches the click handlers.
You probably just want to attach one click handler once, and inside that handler you check the value of clickCount and do something different based on its value.
var clickCount = 0;
$('.link').click(function () {
alert('clickCount = ' + clickCount);
if (clickCount === 0) {
clickCount = 1;
} else {
// stuff
}
});

This should work for you:
var clickCount = 0;
$('.link').click(function() {
if (clickCount === 0) {
alert('first click. clickCount = ' + clickCount);
clickCount = 1;
}
else {
alert('second and further clicks. clickCount = ' + clickCount);
}
});
You don't need to bind event twice. Once is enough. Just check inside of a click handler number of clicks and execute corresponding code.

I need help with these two functions

The first one displays the div, the second one hides the dive up on clicking anywhere else in the document. the problem i have is, when i click the button to show the div, it also counts as a document click so it hides the div. how can i it make not hide the div when i click to show the div
<script type="text/javascript">
function test22(){
var links = document.getElementById('links_safari');
if(links.style.display == "none"){
document.getElementById('links_safari').style.display="";
var content = $('#links_safari').html();
var words = content.split(',');
for (var i = 2; i < words.length; i += 3) {
words[i] += '<br>';
}
content = words.join(' ');
$('#links_safari').html(content);
$('#links_safari').css("margin-top", -322);
$('#links_safari').css("margin-left", 180);
safariPopupStatus++;
}
else{
links.style.display="none";
}
}
</script>
<script type="text/javascript">
$(function (){
$(document).click(
function (e){
var links = document.getElementById('links_safari');
links.style.display="none";
}
)
})
</script>

lets suppose the id of your button is showBtn the code now will be
$(document).click(
function (e){
if($(e.target).attr('id')=='showBtn') return
var links = document.getElementById('links_safari');
if(links.style.display != "none") // why not check here ?
links.style.display="none";
}
)

Have a simple check in your "click" function :
<script type="text/javascript">
$(function (){
$(document).click(
function (e){
var links = document.getElementById('links_safari');
if(links.style.display != "none") // why not check here ?
links.style.display="none";
else
links.style.display="";
}
)
})
</script>

You must stop click event propagation.
Check out http://api.jquery.com/event.stopPropagation/

Create a separate click handler for your button. It should look like:
$("#buttonID").click(function(e) {
test22(); // to show
e.stopPropegation();
});
stopPropegation will keep the event from bubbling up to the document level, preventing the handler from being called there.
You can and also probably should put the show code from test22() into your button handler and have the document handler just handle hiding.