JS函数仅工作一次

Question

我正在使用一个简单的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 opacity() {
    var a = document.getElementById("opacity").value;
    document.getElementById("output").style.opacity = a / 10;
}
document.getElementById("opacity").addEventListener("change", opacity);

工作正常。 有什么想法吗？ 我尝试这样做：

/*
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);
/*

一切都很好，但是我无法应用多个过滤器。 任何帮助表示赞赏！

Answer 1

您每次点击都必须获得价值

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 + "%)";
}

等等