lab

<html>
<head>
  <meta charset="UTF-8">
  <style>
    #square{
      width: 300px;
      height: 300px;
      background-color: gray;
      border: 1px solid black;
      margin-left: 30px;
      float: left;
    }
    #square2{
      width: 300px;
      height: 300px;
      background-color: gray;
      border: 1px solid black;
      margin-left: 30px;
      float: left;
    }
    #form{
      margin-top: 40px;
    }
    input[type=button]{
      display:block;
      margin-top: 30px;
      margin-left: 30px;
    }

  </style>
  <script type="text/javascript">
    var odcienKoloru=50;
    function ustawKolor()
    {
      kwadrat = document.getElementById("square");
      wartosc = odcienKoloru;
      kwadrat.style.backgroundColor="rgb("+wartosc+"%,"+wartosc+"%,"+wartosc+"%)";
    }
    function jasnosc(val)
    {
      kwadrat = document.getElementById("square2");
      if(val=="jasniej"){
        odcienKoloru += 5;
        wartosc = odcienKoloru;
        kwadrat.style.backgroundColor="rgb("+wartosc+"%,"+wartosc+"%,"+wartosc+"%)";
      }
      if(val=="ciemniej"){
        odcienKoloru -= 5;
        wartosc = odcienKoloru;
        kwadrat.style.backgroundColor="rgb("+wartosc+"%,"+wartosc+"%,"+wartosc+"%)";
      }

    }
  </script>
</head>

<body>
  <div id="square"></div>
  <div id="square2"></div>
  <form id="form">
    <input type="button" value="Ustaw Kolor" onclick="ustawKolor()"/>
    <input id="jasniej" type="button" value="Jasniej" onclick="jasnosc(this.id)"/>
    <input id="ciemniej" type="button" value="Ciemniej" onclick="jasnosc(this.id)"/>
  </form>

</body>
</html>