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 Michael Paccione
Michael Paccione
9,017 Points

Vanilla JS click, effect A-this, effect B-everything else

I'm creating a portfolio site and would like to avoid jQuery. I have some effects in mind but am struggling to create the Vanilla JS for it.

3d transform image gallery with 4 columns. Each column has its own ID. Img tags are the only things in each column.

  1. Click an IMG
  2. Selected IMG -> Function A
  3. All other IMG -> Function B

I imagine there is an adding of class selected and use of 'this'...but I can't seem to put it together. I learned jQuery first and now I'm trying start right and learn JS. Any help is appreciated.

1 Answer

Hugo Paz
Hugo Paz
15,622 Points

Hi Michael,

Will something like this work for you?

<!DOCTYPE html>
<html lang="en">
  <head>
    <title> JavaScript</title>
    <style>
    html{
        width:100%;
        height:100%;
    }

    body{
        width:100%;
        height:100%;
        background-color: black;
    }
    #container{
        width:70%;
        height:70%;
        margin: 0 auto;
        background-color: whitesmoke;
    }

    .images{
        width:20%;
        height:20%;
        display: inline-block;
        margin: 2.3%;
    }

    #img1{
        background-color: blue;
    }

     #img2{
        background-color: green;
    }

     #img3{
        background-color: yellow;
    }

     #img4{
        background-color: red;
    }

    </style>
  </head>
  <body>
    <div id='container'>
        <div class='images' id='img1'></div>
        <div class='images' id='img2'></div>
        <div class='images' id='img3'></div>
        <div class='images' id='img4'></div>
    </div>

    <script src='jquery-2.1.1.min.js'></script>
    <script src='jquery-ui.min.js'></script>
    <script src='app.js'></script>
  </body>
</html>

app.js

var images;

images = document.getElementsByClassName('images');


//function to be run when an image is clicked
function setOnclick(img) {

    img.onclick = function(){

        var id = img.getAttribute('id');

        changeColor(id);

    };
}


//set the on click event handlers on each image
for(var i = 0; i < images.length; i++)
{
    var img = images[i];

    setOnclick(img);

}


//check the clicked image id, change its background to white and change all other images background to black 
function changeColor(id){

    for(var i = 0; i < images.length; i++){

        var img = images[i];

        if(img.getAttribute('id') == id){
            document.getElementById(id).style.background = 'white';
        }
        else{
            document.getElementById(img.getAttribute('id')).style.background = 'black';
        }
    }
}
Michael Paccione
Michael Paccione
9,017 Points

Hugo, this is brilliant. Thank You!

This is a good introduction to parameters for me. Haven't had to write one until now.