我是 javascript 的新手，我正试图在我的网页上编写一系列按钮，这些按钮的功能是改变页面的整体亮度。我在我的页面中编写了 3 个按钮，负责增加、减少和重置 body 的亮度。然后我编写了一些 javascript 代码，它应该在每次单击按钮时增加/减少 10% 的亮度。我做了以下事情:
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>但是，我的知识还不足以弄清楚我的 javascript 中出了什么问题。如果有任何建议，我将不胜感激。
最佳答案
正如 Nicholas 所指出的，您在 body id 上遗漏了结束引号，这就是您遇到语法错误的原因。
更改 <body id="body_id>至 <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>您也可以尝试使用 HSL(色调、饱和度、亮度)仅更改不会影响按钮的背景色亮度。我在上面的代码中留下了注释，供您自己尝试。
关于javascript - 编写 Javascript 函数以在单击按钮时更改网页的亮度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46187392/