Javascript でcssが追加できない

実現したいこと

JavaScript初心者です。
現在JavaScriptでcssを追加するということをしているのですが、
一つ追加するとそれのみになってしまい、複数追加することができません。
どうすればいいのでしょうか

例) 輝度とコントラストを同時に変更したいが、片方を変えると片方が変わったままにならない

コード

html
1<!DOCTYPE html><html>
2<head>
3  <meta charset="UTF-8">
4  <meta name="viewport" content="width=device-width" />
5  <title>cbk ji</title>
6  <link rel="stylesheet" href="style.css" />
7</head>
8<body>
9<img src="img/test.png" id="pic">
10
11<div class="test">
12 <p>輝度</p>
13 <div id="sampleOutput" class="values">1</div>
14 <input type="range" value="1" min="0" max="4" step="0.1" id="brightness" onmousemove="valueBrightness()" onchange="valueBrightness()">
15</div>
16
17<div class="test">
18 <p>コントラスト</p>
19 <div id="contrastOutput" class="values">1</div>
20 <input type="range" value="1" min="0" max="10" step="0.1" id="contrast" onmousemove="valueContrast()" onchange="valueContrast()">
21</div>
22  <script src="script.js"></script>
23</body>
24</html>

javascript
1
2var elem = document.getElementsByClassName('test');
3　 var rangeValue = function (elem, target) {
4　 　　return function(evt){
5　　　 　　target.innerHTML = elem.value;
6 　　　}
7　 }
8　 for(var i = 0, max = elem.length; i < max; i++){
9 　　　bar = elem[i].getElementsByTagName('input')[0];
10 　　　target = elem[i].getElementsByTagName('div')[0];
11　　　 bar.addEventListener('input', rangeValue(bar, target));
12　 }
13
14var img = document.getElementById("pic");
15
16function valueBrightness() {
17    var valbrightness = document.getElementById("brightness").value;
18    img.style.webkitFilter = "brightness(" + valbrightness + ")";
19}
20
21function valueContrast() {
22    var valcontrast = document.getElementById("contrast").value;
23    img.style.webkitFilter = "contrast(" + valcontrast + ")";
24}
25

##追記
修正依頼があったので全文表示しました。
また、ネットの情報をかき集めて頑張って作ったのでごちゃごちゃしているかも知れませんが御了承ください。(ここ省略できるよみたいなのがあれば教えていただければ幸いです。)

m.ts10806

2020/02/07 13:50

の前にHTMLおかしいところいくつかありますが、そこは無視でいいのでしょうか。 p始まってないのに閉じてたり。

m.ts10806

2020/02/07 13:51

あと仕様確認です。既にbrightnessが指定されているところにvalueBrightnessを実行した場合はどうしますか？

unity.hatu

2020/02/08 00:02

返信が遅くなってしまいすみません。仕様ですが、色々なサイトを見て組み合わせてるうちにいらないものが残ってました。コードを編集しましたのでそちらをご覧ください

行動規範の内容に同意します

回答2件

ベストアンサー

複数のフィルターを指定する時の記法が有るので、それに倣いましょう。

【filter - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/filter#Syntax

CSS
1/* 複数のフィルター */
2filter: contrast(175%) brightness(3%);

投稿2020/02/07 14:26

kei344

総合スコア69407

unity.hatu

2020/02/08 00:23

質問ですが、JavaScriptでcssを変更させる時に、このように追加することってできますか？質問が曖昧ですみません。

kei344

2020/02/08 00:25

できます。

unity.hatu

2020/02/08 01:20

回答ありがとうございます。とても良いヒントをいただきました。関数を一緒にし、cssの書き方を変えたことにより実現できました。

行動規範の内容に同意します

「img.style.webkitFilter」の部分で示しているimgはどこの部分にあたるのでしょうか？
下記のプログラムで実装したい事ができているでしょうか？

JavaScript
1function valueBrightness() {
2    var valbrightness = document.getElementById("brightness").value;
3    var elementReference = document.getElementById( "brightness" );
4    var values = elementReference.value;
5    document.getElementById( "sampleOutput" ).innerHTML = values;
6    //img.style.webkitFilter = "brightness(" + valbrightness + ")";
7    elementReference.style.webkitFilter = "brightness(" + valbrightness + ")";
8}
9
10function valueContrast() {
11    var valcontrast = document.getElementById("contrast").value;
12    var elementReference = document.getElementById( "contrast" );
13    var values = elementReference.value;
14    document.getElementById( "outputContrast" ).innerHTML = values;
15    //img.style.webkitFilter = "contrast(" + valcontrast + ")";
16    elementReference.style.webkitFilter = "contrast(" + valcontrast + ")";
17}