JavaScript filterの追加

Question

ボタン1とボタン2を用意してフィルターをかけます
ボタンを押すと中身が入れ替わりますが追加される形にしたい
別々のボタンでフィルタをかけながら、
filter = 'blur(3px) grayscale(100%)'のように追加されていく形にしたいです

ボタンを押したときに変数にフィルター名を追加する方法は考えましたがそれが正しいのかはわかりません

<div id="aaa" style="background:red;width:300px;height:300px">hello</div>
<input type="button" value="ボタン1" onclick="document.getElementById('aaa').style.filter = 'blur(3px)'">
<input type="button" value="ボタン2" onclick="document.getElementById('aaa').style.filter = 'grayscale(100%)'">
<input type="button" value="確認用" onclick="alert(aaa.style.filter)">

これは動かない
<div id="aaa" style="background:red;width:300px;height:300px">hello</div>
<input type="button" value="ボタン1" onclick="document.getElementById('aaa').style.filter+ = 'blur(3px)'">
<input type="button" value="ボタン2" onclick="document.getElementById('aaa').style.filter+ = 'grayscale(100%)'">
<input type="button" value="確認用" onclick="alert(aaa.style.filter)">

Comments

[m.ts10806]

>ボタンを押したときに変数にフィルター名を追加する方法は考えましたがそれが正しいのかはわかりません

実現できるなら「正しい」と言えるのでは。
考えただけですか？何かしら試して想定の動作をしてませんか？

[rfd]

マシな書き方があれば教えていただきたいです

<script>
var f="";
function a(){
if(s==0){
f+="blur(3px) ";
}
if(s==1){
f+="grayscale(100%) ";
}
document.getElementById('aaa').style.filter = f;
}
</script>
<div id="aaa" style="background:red;width:300px;height:300px">hello</div>
<input type="button" value="" onclick="s=0;a()">
<input type="button" value="" onclick="s=1;a()">
<input type="button" value="" onclick="alert(aaa.style.filter)">

[m.ts10806]

質問本文に記載してください。
>マシな書き方があれば教えていただきたいです
特に悪いとは思いません。要件満たせてるのでしたら。
しいてなら
a(0) のように引数にして受け取るくらいはしておきたいですね。そこでしか使わない変数をグローバルにする意味ないですし。

Answer 1

filter プロパティをstyle要素もしくは外部CSS化すると、管理が楽になります。
セマンティクス的にも、style属性を使用しない方法が推奨されます。

<style>
.foo {
  filter: blur(3px);
}
.bar {
  filter: grayscale(100%);
}
.foo.bar {
  filter: blur(3px) grayscale(100%);
}
</style>

<div id="sample" style="background:red;width:300px;height:300px;">filter test</div>
<input type="button" value="ボタン1" data-action="add" data-set-class="foo">
<input type="button" value="ボタン2" data-action="add" data-set-class="bar">
<script>
  'use strict';
  {
    const handleClick = function handleClick (event) {
      const input = event.target;
      input.ownerDocument.getElementById('sample').classList.add(input.dataset.setClass);
    };

    for (let input of document.querySelectorAll('input[data-set-class]')) {
      input.addEventListener('click', handleClick, false);
    }
  }
</script>

ここではclass属性を使用しましたが、data-*属性を使用しても構いません。

Re: rfd さん

Answer 2

<div id="aaa" style="background:red;width:300px;height:300px">hello</div>
<input type="button" value="ボタン1" onclick="document.getElementById('aaa').style.filter = document.getElementById('aaa').style.filter+'blur(3px)'">
<input type="button" value="ボタン2" onclick="document.getElementById('aaa').style.filter = document.getElementById('aaa').style.filter+'grayscale(100%)'">
<input type="button" value="確認用" onclick="alert(aaa.style.filter)">

Answer 3

最初は「出来るやり方でやる」で良いと思います。
同じような処理を書いているなら共通化したり、変わる部分だけを引数や変数にしたり、
定義は外だししてみたり、色々やり方はあります。

なので下記もあくまで「現状のコードから改善していった結果」と捉えてください。

---

EventTarget.addEventListener()使った方がHTMLはスッキリします。
設定したい値は決め打ちにするなら配列オブジェクトに持っても良いですが、関連性持たせるならdata属性とか使ってみると汎用性は高まるかもしれません。
※結果は同じなので、正解というのはなく、一例です。実装の仕方は好みやプロジェクトのルールにも依存します

<div id="aaa" style="background:red;width:300px;height:300px">hello</div>
<input type="button" value="ボタン1" data-action="add" data-filter="blur(3px)">
<input type="button" value="ボタン2" data-action="add" data-filter="grayscale(100%)">
<input type="button" value="確認用"  data-action="confirm" >
<script>
const action_func = function(event){
	let et = event.currentTarget;
	let action = et.dataset.action;
	if(action === 'confirm') {
		alert(aaa.style.filter)
	}else if ( action === 'add' ){
		aaa.style.filter += et.dataset.filter;
	}
}
window.addEventListener('DOMContentLoaded', (event) => {
	let btns = document.querySelectorAll('input[type="button"]');
	for(let i = 0 ; i < btns.length; i++){
		btns[i].addEventListener('click',action_func);
	}
});
</script>