Help needed in Javascript events

JavaScript
1

Hi, hope everyone is having a great day! So I’m trying to code an event which changes the color of a div with the color selected from the ‘color’ type input, but it isn’t working, any help would be appreciated!

https://codepen.io/goprime/pen/YvbjeV

2

Hi @goprime10

There’s a couple of issues.

  1. You’re calling .querySelctor('.color') which is looking for an element with class name color. So you’ll want to add the class to the input element, like so: <input class="color" type="color" name="color">

  2. You’re calling .getElementsByClassName('inner-box') which returns an array of all elements that match the provided class. If that was you’re intention and you wanted to update the color for all of them, you’ll need to loop through that array and set the background property on each of them. If it wasn’t then you can use querySelctor again like so: document.querySelector(".inner-box").style.background = event.target.value;

3

Hi, thank you for the reply!, I fixed the issues but it still won’t seem to work

4

Hey, I just looked an it appears to be working. Just a quick note, by default the slider value is black, so if you select a color from the board, it won’t actually change. You need to adjust the lightness using the slider on the right.

colorslider

1 Like