Grow your CSS skills. Land your dream job.

Please, explain part of the script

  • # May 10, 2013 at 10:18 am

    Hi guys.

    Here is source http://codepen.io/Kuzyo/pen/bCdut I can’t undestand this part

     function highlight(node) {
    if (highlightedCell) {
    highlightedCell.style.backgroundColor = '';
    }
    highlightedCell = node;
    node.style.backgroundColor = 'red';
    }

    Please, explain somebody, what does mean **highlightedCell** ? Author didn’t get it by Id or in another way and what this **if (highlightedCell)** verify?

    Thanks in advance.

    # May 10, 2013 at 10:24 am

    The variable `highlightedCell` is a global variable defined within that closure (but in this case I think it’s just an overall global). What that means is that `highlightedCell` is defined outside of that function you shared.

    Basically what that code is saying is if `highlightedCell` exists, then clear the background. Then, assign `highlightedCell` a new element (`node`) then set it to the color red.

    # May 10, 2013 at 10:29 am

    What Mottie said. Keep track which cell is highlighted so you can easily clear the highlight.

    # May 10, 2013 at 10:51 am

    sorry for noobie question but which background this code clear

    if (highlightedCell) {
    highlightedCell.style.backgroundColor = '';
    }

    everyone elements that has background??? :)))

    # May 10, 2013 at 5:07 pm

    No, that variable `highlightedCell` is a reference to the current element that has the highlight background.

    function highlight(node) {
    // checks if there is an element currently highlighted (with the background color)
    if (highlightedCell) {
    // if so, remove the background color from that element
    highlightedCell.style.backgroundColor = ”;
    }
    // highlightedCell is now a reference to the new highlighted element
    highlightedCell = node;
    // give new highlighted element the background color
    node.style.backgroundColor = ‘red';
    }

    # May 11, 2013 at 12:27 pm

    Thanks for detailed explanation. I understood everything.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".