0

Im having a problem with my code here. It wont display all of the colors on the div, an im fairly certain its because its trying to set and display almost 17 million colors at once. I get a google chrome error saying the error code is STATUS_BREAKPOINT upon clicking the div. Its supposed to display all the possible colors of the rgb range in a single linear gradient. I have tested the array loop, and it works fine alone, but the problem is displaying and setting all the colors simultaneously. I have tried adding a line of code that changed the animation duration, hoping that the problem was just displaying them, but it didnt work. I was wondering if there was any way I could optimize this code to run without browser errors. Here is the full code:

<div onclick="oc()" id="d">

</div>

<script>
function oc() {
var div = document.getElementById("d")
var allColors = range(0, 16777215)
div.style.background = "linear-gradient(to right," + allColors + ");"
}

function range(start, end) {
    var ans = [];
    for (let i = start; i <= end; i++) {
    var i2 = i.toString(16)
        ans.push(" #" + i2);
    }
    return ans;
}
</script>

<style>
#d {
  width: 500px;
  height: 25px;
  background-color: black;
/*My attempt to stop the error below*/
  animation-duration: 10s;
}
</style>
user14631264
  • 47
  • 4
  • 2
    First off, have you tried logging the string you're creating? It generates invalid hex color values (`linear-gradient(to right, #0, #1, #2, #3, ...`). Secondly, you don't need to include every color within a gradient, but rather specify key points that are blended between. Perhaps do some further research and debugging and then come back to this question. – pilchard Oct 28 '22 at 00:35
  • see: [Is this possible to create 2-axis 4 color gradient in css (bilinear gradient)?](https://stackoverflow.com/questions/60209914/is-this-possible-to-create-2-axis-4-color-gradient-in-css-bilinear-gradient) or possibly [Creating the perfect rainbow gradient in CSS](https://stackoverflow.com/questions/56418763/creating-the-perfect-rainbow-gradient-in-css) for some inspiration – pilchard Oct 28 '22 at 00:39
  • @pilchard thank you for the suggestion of adding key points. Also i couldnt log the string because that also made the same error so I kind of put all my faith into it working – user14631264 Oct 28 '22 at 00:50

0 Answers0