Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Deaconu Alexandru
.a{fill-rule:evenodd;}techdegree
Deaconu Alexandru
Front End Web Development Techdegree Student 1,854 Points

I have a problem setting a function to modify 3 divs at a single click

<head>
    <style>
        div {
            height: 200px;
            margin: 10px 0
        }
        #a {background: red}
        #b {background: black}
        #c {background: green}
    </style>
</head>
<body>
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
</body>

I need to create a function so at onclick to modify the width of the div's with : div a -> 300px div b -> 600px div c -> 900px

Can someone help me please?

Chyno Deluxe
Chyno Deluxe
16,936 Points

Have you written any JavaScript that i can see how you were trying? Also, can you be a little more specific on the click functionality. are you clicking one element and only changing the width of that element or all?

1 Answer

Chyno Deluxe
Chyno Deluxe
16,936 Points
Chyno Deluxe
Chyno Deluxe
16,936 Points

Here is something simple that gets the results you. Demo jsFiddle

// grab elements by id
var divA = document.getElementById('a');
var divB = document.getElementById('b');
var divC = document.getElementById('c');

/* ---------------------------------------
 * onclick of any element
 * change width to new widths
 * --------------------------------------- */
divA.onclick = function(e) {
  this.style.width = 300 + 'px';
}
divB.onclick = function(e) {
  this.style.width = 600 + 'px';
}
divC.onclick = function(e) {
  this.style.width = 900 + 'px';
}

I hope this helps.