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>
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.