I want to make a random colorBox with colorcode

Question

thanks for coming here to help me. I'm a very beginner of programmer. I want to make a js code about the random colorcode. ex)colorcode means #556549 like that.

My intention is first, to make a array with random colorcode, and second, to pick up the one colorcode and use that code to one part. And other part has the another colorcode.

It means the code below, "???" needs your help..
<<<<. style="file:???" >>>>

here is my code,

<g
   **id="strokes"
   var colorBox = ["#D8FCBE", "#B6EECF", "#F9FDE1", "#FFE9EA", "#CCEDE4", "#A6D2E1", "#A8A6DB", "#D3BAE9", "#F3D0F5", "#FFE7F7"]
   var randomColor = Math.floor(Math.random() * colorBox.length)
   return randomColor

  <path
     style="file:"randomColor;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
     id="path2"
  <path
     style="file:randomColor;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
     id="path4"

  <path
     style="file:randomColor;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
     id="path6"

     style="fill:green;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
     id="path8"

"#" + ((1<<24)*Math.random() | 0).toString(16) – fixedDrill Mar 14 '22 at 10:28 — fixedDrill, Mar 14 '22 at 10:28
But far less readable @fixedDrill – Andy Mar 14 '22 at 10:29 — Andy, Mar 14 '22 at 10:29

score 1 · Answer 1 · answered Mar 14 '22 at 10:34

It is impossible to do this because HTML and CSS is not for dynamic things. You have to use JS to do this.

<g id="strokes">
  <path id="path2" class="paths">
  <path id="path4" class="paths">
  <path id="path6" class="paths">
  <path id="path8" class="paths">
</g>

window.addEventListener('load', () => {
  document.querySelectorAll('.paths').forEach(elem => {
    const colorBox = ["#D8FCBE", "#B6EECF", "#F9FDE1", "#FFE9EA", "#CCEDE4", "#A6D2E1", "#A8A6DB", "#D3BAE9", "#F3D0F5", "#FFE7F7"]
    elem.style.fill = colorBox[Math.floor(Math.random() * colorBox.length)]
  })
})

I want to make a random colorBox with colorcode

1 Answers1