CODEWITHSUNDEEP
jqueryfunction
John
John

Reputation: 31

Click Button for One function Click Again for Another

I have a function that when called will load an external css file. This file produces a high contrast version of the website for the visually impaired. I can call this function when an image button is clicked.

Now what I need is to be able to reload the page when that same button is clicked a second time. This reload effectively removes the included css, and returns the site to looking normal.

I haven't been able to find any code that will allow me to click an image button once to call one function, and then click that same image button a second time to perform another action.

I attempted to ask this question before, but was told I hadn't asked a question. I hope the above is clear, and please ask if you need further clarification.

Upvotes: 2

Views: 8241

Answers (7)

Phyo Wai LIn
Phyo Wai LIn

Reputation: 41

This is simple and useful.

flag = true ;
function myFunction() {
document.getElementById("demo").innerHTML = flag ? "Second paragraph" : "First paragraph";
flag = !flag
}
<p id="demo">First paragraph</p>
<button onclick="myFunction()">click me</button>

Note: "flag" can be changed.

Upvotes: 0

user3894236
user3894236

Reputation: 114

Try out this

in html

<a><img id="test" src="temp5.jpg" /></a>

In .js

$(document).ready(function()
{
var action = 1;

    $("#test").click(function()
    {
    if ( action == 1 ) {
            $("#div2").css('display','block');
            action = 2;
        } else {
            $("#div3").css('display','block');
            action = 1;
        }
    });


    });

Upvotes: 0

Walter Gandarella
Walter Gandarella

Reputation: 858

You can create a global variable $.clicked and store true when clicked first and load the CSS.

In your function you always checks the value of the global variable and then define what action to take from there.

see:

$(document).ready(function(){
    $.clicked = false;

    $("#loadCSS").click(function(e){
        if ($.clicked){
            // action to be taken to remove the CSS loaded
            $.clicked = false;
        } else {
            // action to be taken to load the CSS
            $.clicked = true;
        }
    });
});

I hope it can help you

Upvotes: 1

stevemarvell
stevemarvell

Reputation: 993

<button id="button">click me</button>
<div id="thing">default</div>

and

function first() {
    $('#thing').html("first");
}

function second() {
    $('#thing').html("second");
}


$('#button').on("click", function () {
    first();
    $(this).on("click", function () {
        second();
    });
});

http://jsfiddle.net/stevemarvell/xxJBH/

If you want to remember the state after user reload then you want to store it in a cookie or some such.

Upvotes: 0

StackSlave
StackSlave

Reputation: 10617

I made this for myself:

function zo(f1, f2){
  this.n = 0;
  this.z = function(){
    if(this.n === 0){
      f1(); this.n = 1;
    }
    else{
      f2(); this.n = 0; 
    }
  }
}
var whatever = new zo(function(){/*do stuff*/}, function(){/*do stuff*/});

Keep in mind the context of this inside an Event you will want to call in the context of whatever.

Element.onclick = function(){
  whatever.z.call(whatever);
}

Upvotes: 0

sudhansu63
sudhansu63

Reputation: 6200

I think you can do some thing like this.

<img src= "..." onclick ="Mymethod();" alt="Imagename"/>


var IsCalledOnce = false;

function Mymethod()
{
 if(IsCalledOnce)
{
  //do something
}else
{
 //do something
}

IsCalledOnce = true;
}

You can save the value in global variable scope if for the first time there is no refresh, and refresh for all other time.

if you want to persist thatvalue for longer you can use any of the following

1.HTML5 web storage

2.Cookie

3.Hiddenfield

4.Database(save by ajax call)

Upvotes: 1

Vinc 웃
Vinc 웃

Reputation: 1257

You can set a global variable :

jQuery(document).ready(function () {

    $('#test').click(function () {
        test();
    });

});

var calledonetime = false;

function test()
{
    if(calledonetime=== false)
    {
        calledonetime = true;
        alert('first time');
    }else
    {
        alert('second time');
    }

}

So the first time you click, it will do the first action and then, the second.

Here is the exemple.

Upvotes: 0

Related Questions