Javascript Js函数只工作一次

我正在开发一个简单的javascript照片编辑器，我被困在这一部分：

var opacity = document.getElementById("opacity").value;
var contrast = document.getElementById("contrast").value;
var saturate = document.getElementById("saturate").value;
var brightness = document.getElementById("brightness").value;
var color = document.getElementById("color").value;
var sepia = document.getElementById("sepia").value;

function filter() {
    document.getElementById("output").style.filter = "hue-rotate(" + color + "deg) sepia(" + sepia + "%) brightness(" + brightness * 3 + "%) saturate(" + saturate + "%) contrast(" + contrast * 2 + "%)";
}

var filters = document.getElementsByClassName("slider");
for (i = 0; i < filters.length; i++) {
    filters[i].addEventListener("click", filter);
}

很好。你知道为什么吗？我试着这样做：

/*
function contrast() {
    var b = document.getElementById("contrast").value;
    document.getElementById("output").style.filter = "contrast(" + b * 2 + "%)";
}

document.getElementById("contrast").addEventListener("change", contrast);

function saturate() {
    var c = document.getElementById("saturate").value;
    document.getElementById("output").style.filter = "saturate(" + c + "%)";
}

document.getElementById("saturate").addEventListener("change", saturate);

function brightness() {
    var d = document.getElementById("brightness").value;
    document.getElementById("output").style.filter = "brightness(" + d * 3 + "%)";
}


document.getElementById("brightness").addEventListener("change", brightness);

function color() {
    var e = document.getElementById("color").value;
    document.getElementById("output").style.filter = "hue-rotate(" + e + "deg)";
}

document.getElementById("color").addEventListener("change", color);

function sepia() {
    var f = document.getElementById("sepia").value;
    document.getElementById("output").style.filter = "sepia(" + c + "%)";
}

document.getElementById("sepia").addEventListener("change", sepia);
/*

---

一切正常，但我无法应用多个过滤器。感谢您的帮助

每次单击时都必须获取值

var contrast = document.getElementById("contrast");
var saturate = document.getElementById("saturate");
var brightness = document.getElementById("brightness");
var color = document.getElementById("color");
var sepia = document.getElementById("sepia");
function filter() {
    //You have to convert to number to do arithmetic
    var _brightness = ~~brightness.value;
    document.getElementById("output").style.filter = "hue-rotate(" + color.value + "deg) sepia(" + sepia.value + "%) brightness(" + _brightness * 3 + "%) saturate(" + saturate.value + "%) contrast(" + contrast.value * 2 + "%)";
}

---

等等

您可以提供codepen或JSFIDLE吗？也许如果你有一个在线代码编辑器，只是为了查看你的工作代码。

var contrast = document.getElementById("contrast");
var saturate = document.getElementById("saturate");
var brightness = document.getElementById("brightness");
var color = document.getElementById("color");
var sepia = document.getElementById("sepia");
function filter() {
    //You have to convert to number to do arithmetic
    var _brightness = ~~brightness.value;
    document.getElementById("output").style.filter = "hue-rotate(" + color.value + "deg) sepia(" + sepia.value + "%) brightness(" + _brightness * 3 + "%) saturate(" + saturate.value + "%) contrast(" + contrast.value * 2 + "%)";
}