サイト閲覧者が背景色を２色選びグラデーションを作成する

HTML, JSについて質問です。
サイト閲覧者が要素の背景色を選ぶような機能を検討しております。
その際、閲覧者には2色を選んでもらいグラデーション表示をさせたいと考えております。
下記コードでうまく実装できておらず、改善策を教えていただきたいです。

javascript
1<script type="text/javascript">
2function setBGcolor2(e) {
3function setBGcolor2(f) {
4document.getElementById('msg').style.background = `linear-gradient(#${e}, #${f})`;
5}
6}
7</script>

HTML

html
1<ul>
2<p>Background color1 <input type="color" onChange="setBGcolor1(this.value);"><br>
3<p>Background color2 <input type="color" onChange="setBGcolor2(this.value);"><br>
4</ul>
5

m.ts10806

2022/11/23 07:37

functionの中にfunctionありますが、意図的でしょうか。

pheasant

2022/11/23 08:21

いいえ。JS自体初心者なものでなにをしていいかわからず、２重に使っておりました。

m.ts10806

2022/11/23 09:59 編集

よく見たら同じ名前のfunctionですね。「基本」という意味でもMDN参照してください（ドキュメントのようなものです）。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Grammar_and_types https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Events いきなり作りたいモノだけを作ろうとしても、大抵行き詰って遠回りになるので、入門書レベルから対応した方が良いと思います（プログラムは書いた通りにしか動かないので、「なぜ動くのか」「なぜ動かないのか」がハッキリしています。）。特に「イベント」「オブジェクトの操作」はしっかり覚えておかないと何も組めません。もしかしたら「変数」とか型辺りから。やはり入門書一回やったほうがいいかもしれませんね。

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

回答2件

ベストアンサー

valueで取得できる値にはすでに#がついてる（例 #cccccc）ので、linear-gradient(#${color1}, #${color2})と書いてしまうと##ccccccになっちゃいます。

動作確認サンプル：https://jsfiddle.net/t3Lz8juw/1/

html
1<ul>
2  <li>Background color1 <input type="color"></li>
3  <li>Background color2 <input type="color"></li>
4</ul>
5
6<p id="msg" class="msg"></p>

javascript
1// 必要な要素の取得
2const colorInputs = document.querySelectorAll('input[type="color"]');
3const msgArea = document.getElementById('msg');
4
5// input2つともにイベントリスナーを設定
6colorInputs.forEach(input => input.addEventListener('change', setBGcolor));
7
8// 背景色を変更する関数
9function setBGcolor() {
10	// input２つとものvalueを取得し、それぞれ変数に代入
11	const [color1, color2] = [...colorInputs].map(input => input.value);
12  // 取得されるvalueにはすでに#がついているので、↓の中で#を書いてはいけない
13  msgArea.style.background = `linear-gradient(${color1}, ${color2})`;
14}

おまけ

複数要素対応

htmlタグの中にカスタムデータ属性をかいて、それを利用するといいと思います。

複数要素対応版サンプル：https://jsfiddle.net/t3Lz8juw/2/

イベントの扱いについて

質問者様のように<input type="color" onChange="setBGcolor2(this.value);">と、htmlの中に書く方法はインラインイベントハンドラーと呼ばれています。
現在は非推奨です。

Web 上で見かける最初期のイベントハンドラー登録方法には、上の例のようなイベントハンドラー HTML 属性(インラインイベントハンドラーとも言う)があります（中略）多くのイベントハンドラープロパティと等価な HTML 属性を見付けるでしょうが、使うべきではありません — こういうのは悪い方法とみなされています。ちょっとした事を手早く片づけたい時、イベントハンドラー属性を使うのが簡単に思えるかもしれませんが、あっという間に手がつけられない、効率の悪いものになってしまいます。

（引用元：イベントへの入門 - ウェブ開発を学ぶ | MDN#インラインイベントハンドラー — 使っちゃだめ）

代わりに.addEventListener()が推奨されています。

投稿2022/11/23 07:36

編集2022/11/23 09:20

Cocode

総合スコア2314

回答へのコメント

pheasant

2022/11/23 08:00

ご回答ありがとうございます。 valueがすでに＃がついていること初めて知りました。また、サンプルの作成ありがとうございます。一つ追加で質問ですが、このような２色で生成するグラデーションを何個も実装したいと考えているのですが、ご提案いただいたJSではinputで格納するcolorを区別するような仕様に変更することは可能でしょうか？

Cocode

2022/11/23 08:07

> このような２色で生成するグラデーションを何個も実装したいすみませんどういう意味ですか＞＜？

pheasant

2022/11/23 08:24

２色のグラデーションを持つ背景を持つ要素を複数用意したく考えております。また、各要素ごと色を変えたいという意味です。わかりにくくて申し訳ありません。こちらは自分で解決できましたので大丈夫です。初めての投稿でしたが、Cocodeさんみたいに丁寧に教えてくださってプログラミングへの意欲が高まりました。今後もよろしくお願いいたします。

Cocode

2022/11/23 08:33

よかったです〜！とりあえず複数要素対応版をおまけでのせて回答を更新しておきます！

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

動かない原因や書き忘れているところがいくつかあるので、順番に書いていきます。

一つ目

html
1<p>Background color1 <input type="color" onChange="setBGcolor1(this.value);"><!-- </p>(終了タグ)がない --><br>
2<p>Background color2 <input type="color" onChange="setBGcolor2(this.value);"><!-- </p>(終了タグ)がない --><br>

この場合はぎりぎりセーフかもしれませんが、終了タグがないと誤認識してしまったり思うような動作にならないことがあるので、書き忘れないようにしましょう。

二つ目

js
1function setBGcolor2(e) {
2function setBGcolor2(f) {
3document.getElementById('msg').style.background = `linear-gradient(#${e}, #${f})`;
4}
5}
6</script>

これですが、

そもそもsetBGcolor1がないのに呼び出そうとしている
どちらかを呼び出しても変数はその呼び出した方しか取得できていないので反映されていない
setBGcolor1(func…(e)とする)を呼び出してもsetBGcolor2(func…(f)の方)は実行されない

が原因なはずです。

三つ目

イメージ説明
上の画像は、console.log('e: ${e}…');(Markdownで`が変換されてしまうので'にしています)などとしてeの値を出力したものです。
黄色の線の上に#とあります。つまり、

js
1document.getElementById('msg').style.background = `linear-gradient(${e}, ${f})`;

でちゃんとした16進数の値が引数に渡されるということです。

コード

最後にコードを書いときます。metaタグや要素の位置は自分で調整しといてください。
あとmsgのidをもった要素がなかったので<div id="msg" style="..."></div>と書いてありますが、消して構いません。もちろん変数の名前を変えたりしても問題ありません

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Document</title>
6</head>
7<body>
8    <ul>
9        <div id="msg" style="width: 200px; height: 200px;"></div><!-- #msgという要素がなかったので適当にここに置いています -->
10        <p>Background color1 <input type="color" onChange="setBGcolor1(this.value);"></p><br>
11        <p>Background color2 <input type="color" onChange="setBGcolor2(this.value);"></p><br>
12    </ul>
13    <script type="text/javascript">
14        const msg = document.getElementById('msg');
15        let color1 = '#000000';
16        let color2 = '#000000';
17            function setBGcolor1(e) {
18                color1 = e;
19                msg.style.background = `linear-gradient(${color1}, ${color2})`;
20            }
21
22            function setBGcolor2(f) {
23                color2 = f;
24                msg.style.background = `linear-gradient(${color1}, ${color2})`;
25            }
26        </script>
27</body>
28</html>