My goal is to implement CSS filter effects using JavaScript selectedItem.style.filter.
However, when trying to apply the brightness attribute, it removes the contrast attribute.
Here is the code snippet:
$('.brightness').on('input', function(){
var bright = $('.brightness').val();
var selectedItem = document.getElementsByClassName('box')[0];
selectedItem.style.filter = "brightness("+bright+"%)";
});
$('.contrast').on('input', function(){
var contrast = $('.contrast').val();
var selectedItem = document.getElementsByClassName('box')[0];
selectedItem.style.filter = "contrast("+contrast+"%)";
});
If I adjust the code as follows, I can only update one attribute (either brightness or contrast) on input. How can I update only brightness without contrast?
selectedItem.style.filter = "brightness("+bright+"%) contrast("+contrast+"%)";
You can view a sample of the code in action on jsfiddle.
Please note: I am utilizing JavaScript code selectedItem.style.filter within ReactJS to modify the filter value, hence I require code in pure JavaScript, not jQuery.