Coding Javascript Function to Change Brightness of Webpage on Button Click

0 votes
asked Sep 13, 2017 by john-james

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:

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();
#body_id{
  height: 100px;
  background-color: blue;
  }
    <body id="body_id>
      <p>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. <p>
    <body>
    <form id="brightness_change_form">
    <label for="decrease_brightness" id="change_brightness_label">Change Brightness:</label>
    <input type="button" id="decrease_brightness"  value="Decrease Page Brightness">
    <input type="button" id="increase_brightness" value="Increase Page Brightness">
    <input type="button" id="reset_brightness" value="Reset Page Brightness">
    </form>

1 Answer

+1 vote
answered Sep 13, 2017 by styfle

As Nicholas pointed out, you're missing the closing quote on the body id which is why you're getting a syntax error.

Change <body id="body_id> to <body id="body_id">.

var current = 50;

const $ = (id) => document.getElementById(id);

function modifyBrightness(val) {
    current += val;
    //$("body_id").style.backgroundColor = `hsl(240, 100%, ${current}%)`;
    $("body_id").style.filter = `brightness(${current}%)`;
}

$("decrease_brightness").addEventListener('click', () => {
    modifyBrightness(-10);
});
$("increase_brightness").addEventListener('click', () => {
    modifyBrightness(10);
});
$("reset_brightness").addEventListener('click', () => {
    modifyBrightness(50);
});
#body_id{
  height: 100px;
  background-color: blue;
}
    <body id="body_id">
      <p>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. <p>
    <body>
    <form id="brightness_change_form">
    <label for="decrease_brightness" id="change_brightness_label">Change Brightness:</label>
    <input type="button" id="decrease_brightness"  value="Decrease Page Brightness">
    <input type="button" id="increase_brightness" value="Increase Page Brightness">
    <input type="button" id="reset_brightness" value="Reset Page Brightness">
    </form>
Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...