Search code examples
javascriptattributes

How To Get Previous Data-Color Attribute?


The question is:

Write code in YOUR CODE HERE that logs the current and previous values of the data-color attribute on the #cro-headline element each time that the attribute changes. Your log statement should look something like this: console.log('Current color: ' + currentColor + ' | Previous Color: ' + previousColor);

My answer so far:

var oldFunction = window.changeHeadlineColor;
window.changeHeadlineColor = function(croHeadline) {
  oldFunction(croHeadline);
  var currentElement = document.querySelector('#cro-headline');
  var currentColor = currentElement.dataset.color;
  var previousElement = currentElement.previousElementSibling;
  var previousColor = previousElement.dataset.color;
  console.log('Current color: ' + currentColor + ' | Previous Color: ' + previousColor);
}

I'm just not entirely sure how to log the previous value of the data-color attribute. Any help would be greatly appreciated!

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        [data-color="red"] { color: red; }
        [data-color="blue"] { color: blue; }
        [data-color="green"] { color: green; }
        [data-color="orange"] { color: orange; }
        [data-color="purple"] { color: purple; }
    </style>
    <script>
        window.myHandler = function () {
            console.log('Click!');
        };

        window.getRandomNumber = function (max) {
            return Math.floor(Math.random() * max)
        }

        var colors = ['red', 'blue', 'green', 'orange', 'purple'];
        window.changeHeadlineColor = function (croHeadline) {
            var random = getRandomNumber(5000);
            var randomString = random.toString();
            setTimeout(() => {
                var colorKey = (randomString.length < 4) ? 0 : parseInt(randomString.charAt(0));
                croHeadline.setAttribute('data-color', colors[colorKey]);
                changeHeadlineColor(croHeadline);
            }, random);
        };
    </script>
    <script>
        ////////////////////
        /* YOUR CODE HERE */
        ////////////////////
    </script>
</head>

<body>
    <div id="myDiv">OMG Click me!</div>
    <script>
        document.querySelector('#myDiv').addEventListener('click', myHandler);

        setTimeout(() => {
            myDiv.insertAdjacentHTML('beforebegin', '<h1 id="cro-headline" data-color="red">Cro Metrics</h1>');
            var croHeadline = document.querySelector('#cro-headline');
            changeHeadlineColor(croHeadline);
        }, getRandomNumber(5000));
    </script>
</body>

</html>


Solution

  • I've added just a previousColor = currentColor.

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <style>
        [data-color="red"] {
          color: red;
        }
        
        [data-color="blue"] {
          color: blue;
        }
        
        [data-color="green"] {
          color: green;
        }
        
        [data-color="orange"] {
          color: orange;
        }
        
        [data-color="purple"] {
          color: purple;
        }
      </style>
      <script>
        window.myHandler = function() {
          console.log('Click!');
        };
    
        window.getRandomNumber = function(max) {
          return Math.floor(Math.random() * max)
        }
    
        var colors = ['red', 'blue', 'green', 'orange', 'purple'];
        window.changeHeadlineColor = function(croHeadline) {
          var random = getRandomNumber(5000);
          var randomString = random.toString();
          setTimeout(() => {
            var colorKey = (randomString.length < 4) ? 0 : parseInt(randomString.charAt(0));
            croHeadline.setAttribute('data-color', colors[colorKey]);
            changeHeadlineColor(croHeadline);
          }, random);
        };
      </script>
      <script>
        var previousColor;
        var oldFunction = window.changeHeadlineColor;
        
        window.changeHeadlineColor = function(croHeadline) {
          oldFunction(croHeadline);
          var currentElement = document.querySelector('#cro-headline');
          var currentColor = currentElement.dataset.color;
          console.log('Current color: ' + currentColor + ' | Previous Color: ' + previousColor);
          previousColor = currentColor;
        }
      </script>
    </head>
    
    <body>
      <div id="myDiv">OMG Click me!</div>
      <script>
        document.querySelector('#myDiv').addEventListener('click', myHandler);
    
        setTimeout(() => {
          myDiv.insertAdjacentHTML('beforebegin', '<h1 id="cro-headline" data-color="red">Cro Metrics</h1>');
          var croHeadline = document.querySelector('#cro-headline');
          changeHeadlineColor(croHeadline);
        }, getRandomNumber(1000));
      </script>
    </body>
    
    </html>