'How to change background color of the web page according to user choice?

I tried using the input color tag but i have to click twice on the tag to change the color any way to fix this

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="">
      <label for="color"> Color:</label>
      <input
        type="color"
        name="color"
        id="color"
        value="#00FFFF"
        onclick="changecolor()"
      /><br />
    </form>
    <script>
      function changecolor() {
        let color = document.getElementById("color").value;
        document.body.style.backgroundColor = color;
      }
    </script>
  </body>
</html>

javascript

Solution 1:^[1]

Your code does work, only you are using an incorrect event listener for what you are trying to do.

Simply change your event from onclick to onchange

Like this

<input
        type="color"
        name="color"
        id="color"
        value="#00FFFF"
        onchange="changecolor()"
      />

Hopefully this makes sense.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Aidan Donnelly

'How to change background color of the web page according to user choice?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]