CODEWITHSUNDEEP
javascripthtmlcss
Antonio Pavicevac-Ortiz
Antonio Pavicevac-Ortiz

Reputation: 7759

How would I toggle between states in JavaScript which have been created programmatically?

I changed the opacity via JS on these li elements, which are just squares in a ul element. Anyway, I wanted to see if I could just toggle the opacity back and forth, and can't for the life of me figure out how.

<ul id='grid'>
    <li class="yellow" alt="yellow"></li>
    <li class="purple" alt="purple"></li>
    <li class="blue" alt="blue"></li>
    <li class="pink" alt="pink"></li>
    <li class="green" alt="green"></li>
    <li class="ygreen" alt="ygreen"></li>
    <li class="gray" alt="gray"></li>
    <li class="red" alt="red"></li>
</ul>

var grid = document.getElementById('grid');

    function changeOpacity(e) {
        if (e.target !== e.currentTarget) {
            var clickedItem = e.target;
            clickedItem.style.opacity = '.5';
        }

        e.stopPropagation();
    }

    grid.addEventListener('click', changeOpacity, false);

I thought of adding another if statement inside like so would work...

 function changeOpacity(e) {
        if (e.target !== e.currentTarget) {
            var clickedItem = e.target;
            clickedItem.style.opacity = '.5';
        }

        e.stopPropagation();

        (clickedItem.style.opacity = '.5') ? clickedItem.style.opacity = '1';
    }

But all i get is: Uncaught SyntaxError: Unexpected token ;

UPDATE

function changeOpacity(e) {
        if (e.target !== e.currentTarget) {
            var clickedItem = e.target;
            clickedItem.style.opacity = '.5';
        }

        e.stopPropagation();

       (clickedItem.style.opacity === '.5') ? clickedItem.style.opacity = '1' : clickedItem.style.opacity = '.5';
    }

Upvotes: 0

Views: 54

Answers (1)

Josh Beam
Josh Beam

Reputation: 19792

(clickedItem.style.opacity = '.5') should be (clickedItem.style.opacity === '.5')

You're using the wrong equality operator. That's not the cause of the syntax error, though.

You're getting the syntax error because that's not a full ternary operator. It should look like:

condition ? answer1 : answer2

Currently, you only have answer1.

Maybe what you're looking for is something like this:

clickedItem.style.opacity = clickedItem.style.opacity === '.5' ? '1' : '.5';

That's a long, drawn out ternary statement though. I might suggest just going with a plain old if...else. More readable.

Edit

Try something like this (see the jsfiddle):

var grid = document.getElementById('grid');

grid.addEventListener('click', changeOpacity, false);

function changeOpacity(e) {
    var el = e.target;

    if(el.classList.contains('half')) {
      el.classList.remove('half');  
    } else {
      el.classList.add('half');   
    }
}

CSS:

.half {
  opacity: .5;
}

Usually better to just toggle classes rather than rely on inconsistent DOMElement style objects.

I leave the semantics of the class names to you (.half is really terrible).

Upvotes: 3

Related Questions