Linking color value of one element to another

Question

I am working on a project and I am having difficulty writing out the code I need to make the ball in my project change to the same color as the button in the top left hand corner when I change the color. I need them to be in sync. A few things to keep in mind this is without jquery pure vanilla javascript and ecma 5

With that being said here are the instructions for the project:

Use Javascript form events to adjust the background colour of a circle on the screen.

Fork this repository.

**Make a <form> tag with an <input> inside it—use type="color" for the input.

When the form’s change event fires, adjust the background-color of the ball to match the input’s value.

Run it through Markbot and make sure it passes all the checks.

Here is what my project currently looks like:

When I click on the button in the top left hand corner this pops up:

Here is my html:

<!DOCTYPE html> <html> <head> <title>CircleColourr</title> <link href="main.css" rel="stylesheet"> </head> <body> <div class="ball"></div> </body> <script src="jquery.min.js"></script> <script src="main.js"></script> </html>

Here is my main.css

html{ box-sizing: border-box; } *, *::before, *::after{ box-sizing: inherit; } .ball{ width: 200px; height: 200px; position: absolute; top: 200px; left: 200px; background-color: ; border-radius: 100px; }

Here is my main.js

 var body = document.querySelector('body'); var h2 = document.createElement('h3'); var forma = document.createElement('form'); var inForma = document.createElement('input'); var h2 = document.createTextNode('Colour'); inForma.type = 'color'; inForma.id = 'listen'; body.appendChild(h2); forma.appendChild(inForma); body.appendChild(forma); var bally = document.querySelector('.ball'); bally.style.backgroundColor = forma; // first attempt console.log(bally.style.backgroundColor = forma);//first attempt var button = document.getElementById('listen').addEventListener ('click', change); function change(e){ document.querySelector('.ball').style.backgroundColor = forma; }

I have made two attempts the first one just assigns the actual form element to the ball div and the second one nothing appears to be happening. The thought process for me was to assign the forma to the backgroundColor of the ball. I just need some guidance please.

Much better (IMO) to make a CSS class that has the background color you want, and then add the class to the ball — ControlAltDel
– ControlAltDel, Commented Jul 20, 2018 at 18:52

Daniel · Accepted Answer · 2018-07-20 18:54:39Z

there's a couple issues I see

there's a space here, which will break it
getElementsById is not a valid function, use getElementById
the event listener click will fire when you open the ui, you want to use a change listener, to update value after the user selects color var button = document.getElementsById('listen').addEventListener ('click', change);

you don't have an element with a class called class, you do have .ball though document.querySelector('.class').style.backgroundColor

here's a working version https://jsfiddle.net/rp9kxLyu/

Thank you for the clarification I forgot to update my code this actually worked and thank you for the clarification.

Collectives™ on Stack Overflow

Linking color value of one element to another

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related