実現したいこと
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
##追記
修正依頼があったので全文表示しました。
また、ネットの情報をかき集めて頑張って作ったのでごちゃごちゃしているかも知れませんが御了承ください。(ここ省略できるよみたいなのがあれば教えていただければ幸いです。)
回答2件
あなたの回答
tips
プレビュー