title: Coding Javascript Function to Change Brightness of Webpage on Button Click
body: <p>I am rather new to javascript and am attempting to code a series of buttons on my webpage that function to change the overall brightness of the page. I've coded 3 buttons in my page responsible for increasing, decreasing and resetting the brightness of the body. Then I've coded some javascript which is supposed to increase/decrease the brightness by 10% with each button click. I've done the following:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var $ = function (id) {
   return document.getElementById(id);
  };
  
  function modifyBrightness(val) {
   var brightness = 1.0;
   brightness = brightness + val;
   brightness = parseInt(brightness, 10);
   $("body_id").style.filter = "brightness(brightness)";
   return brightness;
  }
  
  function resetBrightness() {
   $("body_id").style.filter = "brightness(1.00)";
  }
  
  $("decrease_brightness").onclick = modifyBrightness(-0.1);
  $("increase_brightness").onclick = modifyBrightness(0.1);
  $("reset_brightness").onclick = resetBrightness();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#body_id{
    height: 100px;
    background-color: blue;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;body id="body_id&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt pharetra dui, non efficitur mauris scelerisque sed. Donec auctor ut sem vitae bibendum. Aliquam dignissim aliquet augue et condimentum. Aliquam non dui velit. Aenean egestas ligula eget urna malesuada imperdiet. Vivamus vel velit dapibus, sollicitudin dolor at, elementum quam. Aenean eu libero vel velit faucibus convallis. Nullam et velit a ipsum sagittis malesuada. &lt;p&gt;
      &lt;body&gt;
      &lt;form id="brightness_change_form"&gt;
      &lt;label for="decrease_brightness" id="change_brightness_label"&gt;Change Brightness:&lt;/label&gt;
      &lt;input type="button" id="decrease_brightness"  value="Decrease Page Brightness"&gt;
      &lt;input type="button" id="increase_brightness" value="Increase Page Brightness"&gt;
      &lt;input type="button" id="reset_brightness" value="Reset Page Brightness"&gt;
      &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, I simply am not knowledgeable enough to figure out what I've got wrong in my javascript. I would greatly appreciate any advice.</p>