-1

I am trying to toggle the data-isAdmin to true and back in a toggle loop, here is my code:

<div id="is-admin" data-isAdmin="false" onclick="toggleIsAdmin();">
    NOT Admin
</div>

<script>

toggleIsAdmin() {

    let item = document.getElementById('is-admin').getAttribute('data-isAdmin');

    item2 = Boolean(item);

    alert(item2);  // ==> true

    alert(!item2); // ==> false

}

</script>

It should return false and after the flip return true.

I need the string "false" to be understood by the Boolean() function as false and not true. It is literally spelled f a l s e and not t r u e.

If Boolean() is not able to understand that and will interpret any string, even an empty one like "" as true, then what other function can understand the string "false" as false and the string "true" as true?

Or is there a simpler way to toggle it?

I was expecting Boolean() function to understand "false" to mean false.

kamilfromxyz
  • 1
  • 2
  • `item2 = item === 'false' ? false : true` – Konrad Mar 31 '23 at 11:53
  • I was hoping for some universal casting function that would understand other stuff like 0 or 1 and omitting the if condition altogether. Is doing the if condition the only way how to do this? ;( – kamilfromxyz Mar 31 '23 at 11:54
  • 1
    https://stackoverflow.com/questions/263965/how-can-i-convert-a-string-to-boolean-in-javascript – epascarello Mar 31 '23 at 11:54
  • @epascarello hmm, this seems to be working. It's not intelligent enough to understand 0 and 1 or Y or N, but such function doesn't probably exist in JS. I am too spoiled by Laravel helpers ;) -> https://laravel.com/docs/9.x/requests#retrieving-boolean-input-values Isn't there something like `boolean($item2)` in Laravel? I have header about lodash that should be a helper library, but haven't used that as such, although Laravel uses it. Could that or some other small library be the way how to achieve this? – kamilfromxyz Mar 31 '23 at 12:02
  • `console.log(typeof JSON.parse(item));` but just make a helper function on your own... not sure what the big deal is. – epascarello Mar 31 '23 at 12:14
  • Unless you absolutely have to support differing versions of true/false (e.g. 0/1, yes/no, y/n) then I wouldn't, such functions are just unnessary abstrations in my opinion. If you want true/false then use true/false, it'll make your code a lot simpler and easier to maintain. – rhys_stubbs Mar 31 '23 at 12:51

1 Answers1

0

Keep things simple and do:

I'd suggest using data-is-admin rather than data-isAdmin. There is really no reason to introduce a heavy dependency such as lodash to achieve such simple logic. Make your code simple and easy to maintain, avoid coding "magic"...

function toggleIsAdmin() {
    const element = document.getElementById( 'is-admin' );
    
    if ( !element ) {
        throw new Error( 'failed to find element' );
    }

    if ( element.dataset.isAdmin && element.dataset.isAdmin === 'true' ){
        alert( true );
    } else {
        alert( false );
    }

    // If you care for one-liners...
    // alert( element.dataset.isAdmin === 'true' );
}

You could also write a parsing function if you wanted, this could be extended to support other truth-like values.

function parseBool( boolStr ){
    if ( boolStr === 'true' ) {
        return true;
    }
    return false;
}
rhys_stubbs
  • 538
  • 6
  • 16
  • data-is-admin is editor unfriendly. isAdmin is editor friendly. Especially if you are using vi keybindings. Also, I am not interested in if conditions. – kamilfromxyz Mar 31 '23 at 13:11