colinh_7 Posted March 3, 2015 Share Posted March 3, 2015 (edited) Hello, I'm new to JavaScript and am currently trying to expand my knowledge of it for a project at work. Attached is a simplified version of what I'm trying to do. What I'm looking for is basically when I click the small red square, the large square would turn red. (and the same thing for every other color) Also, I want all of the buttons and large squares to be images, as this is just a simplified version and I will eventually be using actual images. I've been looking for ways to do this, and while it seems like there would be a simple solution, I'm having a very hard time finding it. Any help would be greatly appreciated! Thanks! Edited March 3, 2015 by colinh_7 Link to comment Share on other sites More sharing options...
davej Posted March 3, 2015 Share Posted March 3, 2015 Try... <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style>#big{float:left;margin:5px;width:200px;height:200px;background-color: green;border:1px solid #111;}#little01,#little02,#little03{float:left;width:30px;height:30px;margin:175px 2px 0 0;border:1px solid #111;}</style><script>window.onerror = function(a, b, c, d){alert('Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+' Column: '+d);return true;}</script><script>'use strict';window.onload = init;function init() {var ele = document.getElementById('little01');ele.onclick = change;ele.style.backgroundColor = 'green';ele = document.getElementById('little02');ele.onclick = change;ele.style.backgroundColor = 'red';ele = document.getElementById('little03');ele.onclick = change;ele.style.backgroundColor = 'yellow';}function change(){//alert('change to '+this.id+' color='+this.style.backgroundColor);document.getElementById('big').style.backgroundColor = this.style.backgroundColor;}</script></head><body><div id="big"></div><div id="little01"></div><div id="little02"></div><div id="little03"></div><br style="clear:both"/></body> </html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now