Any way to toggle between two strings using one piece of JavaScript?

Question

I want to do something like

if(something.val() == 'string1')
{
     something.val('string2');
}
else if(something.val() == 'string2')
{
    something.val('string1')
}

But in one line of code. I can't quite remember how it's done, but it involves question marks and colons...

score 39 · Accepted Answer · edited Jan 14 '14 at 19:41

39

Try:

something.val(something.val() == 'string1' ? 'string2' : 'string1');

It is called a ternary expression.

edited Jan 14 '14 at 19:41

nawfal

70,104
56
326
368

answered Sep 27 '10 at 20:53

Matthew Manela

16,572
3
64
66

6

But this will set `string1` even if value is `string3`, not only for `string2` – dev-null-dweller Sep 27 '10 at 21:03
@dev-null-dweller this isn't a problem - I'm toggle the text in a button between 'Reply' and 'Cancel' :) – Bojangles Sep 27 '10 at 21:10

Cristian Sanchez · Answer 2 · 2010-09-27T21:16:40.933

10

Look ma, no ternary operator!

The following works because Javascript short circuits boolean expressions.

If something == string1 then evaluate string2 -- since string2 is a truthy value and the next expression involves the OR operation there is no need to continue. Stop and return string2.

If something !== string1 then it will skip the next operand because if it is false, there is no point in evaluating the next operand (with AND). It will "jump" to the OR operation and return string1.

function toggleString(something, string1, string2) {
   return something == string1 && string2 || string1;
}

something.val(toggleString(something.val(), "string1", "string2"));

If you want the assignment done:

function toggleValue(something, string1, string2) {
   something.val(something.val() == string1 && string2 || string1);
}

toggleValue(something, "string1", "string2"); // something is a jQuery collection

In the end however, I would end up using the ternary operator because this solution might be unclear to other programmers. If you come from Java or other languages, you may expect the function to return a boolean because of all the boolean operators.

edited Sep 27 '10 at 21:16

answered Sep 27 '10 at 20:53

Cristian Sanchez

31,171
11
57
63

Ok, so you still have to assign to `something` in there somewhere. You didn't assign, you only compared. – jcolebrand Sep 27 '10 at 20:56
@Daniel ... yeah, I know that. My point was more like the ternary reads faster than that, and you still have to show the assignment in your clever post ;) – jcolebrand Sep 27 '10 at 20:58
+1 clever solution, though you should explain *why* this works. – Daniel Vandersluis Sep 27 '10 at 20:59
Thanks - a bit long winded for what I want as I'm doing this inline, but handy nonetheless! – Bojangles Sep 27 '10 at 21:00
@drachenstern: Since everybody else posted the ternary operator solution there really is no point in posting the same thing. This function will toggle between the two values based on the something. How he uses it (if at all) will be up to him -- it's would be up to him to modify it if he wants to make the function easier to use. Besides, `something` is meant to be a string (which are immutable) so I wouldn't be able to change it anyways. I'll add the explanation and add the version that does the assignment to satisfy *you people*. – Cristian Sanchez Sep 27 '10 at 21:05
lol@you people ... I added +1 for the clever. I just wondered if it was too clever as a two line post (ignoring brackets) ... and as for the "since everybody else posted the ternary" ~ it was what he asked for, and I was the second person to actually reply, but yeah, it was quite an avalanche of the same answer repeatedly. – jcolebrand Sep 27 '10 at 21:15
See my answer towards the bottom if you're interested in making this a jquery function so you can call $('input').toggleVal('str2','str2'); – fehays Sep 27 '10 at 21:21

kolossal7 · Answer 3 · 2017-02-03T13:15:57.613

6

Another way to do it using object properties:

{ 'string1': 'string2', 'string2': 'string1' }[value]

As in the question:

something.val(
  { 'string1': 'string2', 'string2': 'string1' }[something.val()]
)

edited Feb 03 '17 at 13:15

answered Feb 02 '17 at 19:00

kolossal7

155
3
9

This is an extremely question, but if you are going to answer it perhaps you could add an example implementation, you will notice most upvoted answers do. Cheers – webLacky3rdClass Feb 02 '17 at 19:36
1

Very clever! I'd be tempted to use it but for two reasons; 1, it's not immediately clear what this code does and 2, nowadays I'd use ES6 destructuring like `[ string2, string1 ] = [ string1, string2 ]` – Bojangles Feb 03 '17 at 09:36
@Bojangles two switch two strings, yes, but how would you use ES6 features for your original question? – kolossal7 Feb 03 '17 at 13:16

fehays · Answer 4 · 2010-09-27T21:45:23.757

3

How about using @Daniel's code along with a jquery function:

$.fn.toggleVal = function (str1, str2) {
     return this.val(this.val() == str1 && str2 || str1);
};
$("input").toggleVal('string 1', 'string 2');

edited Sep 27 '10 at 21:45

answered Sep 27 '10 at 21:11

fehays

3,147
1
24
43

1

There really is no benefit for using my solution over a ternary operator - I just thought it would be nice to offer an alternate version :). Nice though! isn't `this` already a jQuery object? So there is no need to wrap it with the `$` function. Also, jQuery probably returns `this` when calling `val` as a setter, so you might be able to merge those two lines into a single one line return statement. – Cristian Sanchez Sep 27 '10 at 21:27
Indeed you are correct. Thanks for the tip :) I will update the code. And I like yours over the ternary operator because question marks scare me :P – fehays Sep 27 '10 at 21:44
That is the right answer – Sam Feb 07 '23 at 22:03

score 2 · Answer 5 · answered Jul 22 '18 at 16:12

Though, the solutions with a ternary operator are the most readable, you could also use xor from Lodash:

x = _.xor([a, b], [x])[0]

For your specific case:

something.val(_.xor(['s1', 's2'], [something.val()])[0]);

Ref: https://lodash.com/docs/4.17.10#xor

score 1 · Answer 6 · answered Sep 27 '10 at 20:53

1

You mean to use the ternary operator:

something.val((something.val() == 'string1') ? 'string2' : 'string1');

answered Sep 27 '10 at 20:53

Mike Axiak

11,827
2
33
49

why are you grabbing the jquery object back out? – jcolebrand Sep 27 '10 at 20:54

score 1 · Answer 7 · answered Dec 07 '10 at 20:48

1

As of jQuery 1.4, you can do this:

something.val(function(index, val) {
    return val == 'string1' ? 'string2' : 'string1';
});

answered Dec 07 '10 at 20:48

Eric

95,302
53
242
374

score 0 · Answer 8 · answered Sep 27 '10 at 20:53

0

 something.val( something.val() == 'string1'? 'string2' : 'string1' );

or for clarification

val astring = something.val() == 'string1'? 'string2' : 'string1';
something.val( astring );

answered Sep 27 '10 at 20:53

jcolebrand

15,889
12
75
121

score 0 · Answer 9 · answered Jan 21 '22 at 16:16

0

My way was this in a similar situation:

let value = 0

const toggleTwoValues = () => 
  value === 0 ? value = 1 : value = 0

answered Jan 21 '22 at 16:16

Gabesz Juhász

167
5

score -1 · Answer 10 · edited Aug 20 '12 at 05:46

-1

something.val(something.val() == 'string1' ? 'string2' : 'string1');

edited Aug 20 '12 at 05:46

Conner

30,144
8
52
73

answered Sep 27 '10 at 20:54

James Curran

101,701
37
181
258

Any way to toggle between two strings using one piece of JavaScript?

10 Answers10

Linked

Related