CODEWITHSUNDEEP
javascripthtmlcss
Jay
Jay

Reputation: 159

How do I change an if-else statement into a toggle?

I have black text that when double clicked, changes to a different color. I want it to be able to change back to black on a double click. Right now, I have:

<script>
<h1 id="color"> I CHANGE COLORS! </h1>
<a href="javascript:void(0)" ondblclick="
        counter++;
        if(counter%2==1){color()} else {black()}
        ">Double click here</a>
</script>

The two functions called are color() and black(). Is there anyway I can use a toggle instead of this if-else with javascript?

Upvotes: 3

Views: 1206

Answers (5)

TildalWave
TildalWave

Reputation: 1667

You could use one of the anchor element's properties to carry the toggle value for you (for example it's ID). Then you'd be able to include all of the necessary code in a single ondoubleclick event without the need to declare the toggle variable beforehand:

<h1 id="color"> I CHANGE COLORS! </h1>
<script>
  function black(id) { document.getElementById(id).style.color = 'black' }
  function red(id)  { document.getElementById(id).style.color = 'red' }
</script>
<a id="toggle_uninitialized" href="javascript:void(0)" ondblclick="(this.id=='toggled') ? this.id='not_toggled' : this.id='toggled';(this.id=='toggled') ? red('color') : black('color');">Double click here</a>

updated fiddle

EDIT: Changed IDs to not include a space character. Obviously, this solution could be adopted to use any other existing anchor element attributes that are otherwise unneeded (unused) in your code as a toggle switch.

Upvotes: 1

loveky
loveky

Reputation: 1012

ondblclick='(toggle = ! toggle) ? alert("1") : alert("2");'>Double click here</a>

before that, you need set toggle to true or false

Upvotes: 0

teynon
teynon

Reputation: 8318

http://jsfiddle.net/t6BUE/

<style> .black {color: black;} .red {color: red;}</style>
<div id="color" class="black">test</div>

<input type="button" name="button" value="Change"
onClick="document.getElementById('color').className = (document.getElementById('color').className=='red') ? 'black' : 'red';">

I would recommend not checking against the style.color value since apparently browsers may change this value. (I just tested on Chrome and it changed #FF0000 to rgb(255,0,0); which makes checking against that value unpredictable in different browsers. I recommend checking the class instead.

Upvotes: 0

user229044
user229044

Reputation: 239481

Store the functions in a globally accessible object:

functions = {};
functions[true] = black;
functions[false] = color;

black = true

And then invert your state flag:

<a href="javascript:void(0)" ondblclick="
        black = !black;
        functions[black]();
        ">Double click here</a>

While this satisfies your very arbitrary requirements, it's a hideous solution.

Upvotes: 1

bfavaretto
bfavaretto

Reputation: 71939

You can use the ternary operator:

this.style.color = this.style.color == '#000000' ? '#ff0000' : '#000000';

(preferably not in an inline event handler)

Upvotes: 0

Related Questions