How to display current HEX code of dynamically changing page background?-CodePudding

I'm trying to have my page constantly update and display the current HEX code of the background colour, which changes colour every 3000ms (code from here). I've already tried using innerHTML and eventListener, but can't quite get it. This is the code for my page now:

<body  id="body" style="user-select: none; cursor: none">
    <div ></div>
    <div  onm ousedown='return false;' onselectstart='return false;'>
        <div id="container" style="background-color: transparent !important;"></div>
        <main  id="content" style="">
            <div  style="">
                <h1  style="background-color: transparent; font-weight: bold; color: black;" id="name">Jonathan Lee</h1>
            </div>

        </main>
        <div id="intro" style="height: 500px; text-align: center">
            <h2>Current Colour</h2>
            <p id="testval"></p>
        </div>
    </div>
    <script>
        function invertColor(hex, bw) {
            if (hex.indexOf('#') === 0) {
                hex = hex.slice(1);
            }
            // convert 3-digit hex to 6-digits.
            if (hex.length === 3) {
                hex = hex[0]   hex[0]   hex[1]   hex[1]   hex[2]   hex[2];
            }
            if (hex.length !== 6) {
                throw new Error('Invalid HEX color.');
            }
            var r = parseInt(hex.slice(0, 2), 16),
                g = parseInt(hex.slice(2, 4), 16),
                b = parseInt(hex.slice(4, 6), 16);
            if (bw) {
                // http://stackoverflow.com/a/3943023/112731
                return (r * 0.299   g * 0.587   b * 0.114) > 186 ?
                    '#000000' :
                    '#FFFFFF';
            }
            // invert color components
            r = (255 - r).toString(16);
            g = (255 - g).toString(16);
            b = (255 - b).toString(16);
            // pad each with zeros and return
            return "#"   padZero(r)   padZero(g)   padZero(b);
        }

        function padZero(str, len) {
            len = len || 2;
            var zeros = new Array(len).join('0');
            return (zeros   str).slice(-len);
        }

        var color = function getRandomColor() {
            var letters = '0123456789ABCDEF'.split('');
            var color = '#';
            for (var i = 0; i < 6; i  ) {
                color  = letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
    

        setInterval(function() {
            var bgColor = color();
            var textColor = invertColor(bgColor, true);
            document.getElementById("body").style.backgroundColor = bgColor; // ensure that all following ID calls are sequential
            document.getElementById("name").style.color = textColor;
            document.getElementById("intro").style.color = textColor;
        }, 3000);

    </script>
</body>

I'm after the current HEX code to be displayed in the p element with ID "testval".

CodePudding user response：

Just add

document.getElementById("testval").innerHTML = bgColor;

after the other document.getElementById()s...

function getRandomColor() {
  var letters = '0123456789ABCDEF'.split('');
  var color = '#';
  for (var i = 0; i < 6; i  ) {
    color  = letters[Math.floor(Math.random() * 16)];
  }
  return color;
}


setInterval(function() {
  var bgColor = getRandomColor();
  document.body.style.backgroundColor = bgColor;
  document.getElementById("testval").innerHTML = bgColor;
}, 1000);

<p id="testval">...</p>