Javascript document.getElementById will select the div with given id

Source Code: (back to article)

Result: Report an issue

<!DOCTYPE html>

<html>

<head>

<title>Title of the document</title>

<style>

div {

width: 100px;

height: 100px;

float: left;

margin-right: 50px;

}

.parallelogram {

border-radius: 0;

-moz-border-radius: 0;

-webkit-border-radius: 0;

margin-left: 20px;

-webkit-transform: skew(20deg);

-moz-transform: skew(20deg);

-o-transform: skew(20deg);

}

.circle {

border-radius: 50%;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

}

.square {

border-radius: 0%;

-moz-border-radius: 0%;

-webkit-border-radius: 0%;

}

#parallelogram {

background-color: #1c87c9;

}

#circle {

background-color: #8ebf42;

}

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        float: left;
        margin-right: 50px;
      }      
      .parallelogram {
        border-radius: 0;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        margin-left: 20px;
        -webkit-transform: skew(20deg);
        -moz-transform: skew(20deg);
        -o-transform: skew(20deg);
      }      
      .circle {
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
      }      
      .square {
        border-radius: 0%;
        -moz-border-radius: 0%;
        -webkit-border-radius: 0%;
      }      
      #parallelogram {
        background-color: #1c87c9;
      }      
      #circle {
        background-color: #8ebf42;
      }      
      #square {
        background-color: #cccccc;
      }
    </style>
  </head>
  <body>
    <h2>Click on the figure</h2>
    <div class="parallelogram" id="parallelogram"></div>
    <div class="circle" id="circle"></div>
    <div class="square" id="square"></div>
    <script>
      document.getElementById("parallelogram").onclick = function() {
          document.getElementById("parallelogram").style.display = "none";
        }
      document.getElementById("circle").onclick = function() {
          document.getElementById("circle").style.display = "none";
        }
      document.getElementById("square").onclick = function() {
          document.getElementById("square").style.display = "none";
        }
    </script>
  </body>
</html>