onclickを使用して、画面制御を行いたい

現在以下の問題があり、解決できません。。。
よろしければご教授頂けると助かります。

【やりたいこと】
・初期表示時
セレクトボックスに入っている値を使用して画面表示を制御する。

・初期表示以外
セレクトボックスで選択した値を使用して画面表示を制御する。
※セレクトボックスとは別にあるボタンのクリック時

【困っていること】
初期表示のタイミングで画面制御を行うことは出来たのですが、
初期表示以外（ボタン押下時）に画面表示を制御することができない。

以下ソースイメージです。
初期表示時の画面制御と初期表示以外（ボタン押下時）の画面制御は同じため、
メソッドを呼び出す契機だけ変えればできるかなと思い以下のような実装にしてみました。
しかし、これだとなぜかセレクトボックスを変更したタイミングで画面制御が行われ、
ボタンをクリックしても動作しません。
どこが原因なのかわからないため、アドバイスいただきたいです。
（ソースを載せられないため、こうじゃないかとかでも大丈夫です！）

javascript
1jQuery(function($)) {
2  $.fn.hogehoge = function(){
3    return ～
4
5      変数1 = $(this)
6
7      変数1.on(load,function(e))
8        function呼び出し
9
10      変数1.on(click,function(e))
11        function呼び出し
12   
13    function
14    ～画面制御の処理
15}
16
17

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

回答2件

jQuery 様様様様を使うまでもない

html
1<!DOCTYPE html>
2<meta charset="UTF-8">
3<html lang="ja">
4<title>?</title>
5<style>
6
7</style>
8
9<body>
10<header>
11  <select id="HOGE">
12    <option value="red">red
13    <option value="green">green
14    <option value="blue" selected>blur
15  </select>
16  <input type="button" value="Change" id="FUGA">
17</header>
18<div id="PIYO">Test text: abc</div>
19<script>
20
21
22function setColor () {
23  PIYO.style.color = HOGE.value;
24}
25
26
27function handler (event) {
28  switch (event.type) {
29  case 'DOMContentLoaded' :
30    setColor ();
31    break;
32  
33  case 'click' :
34    if (FUGA == event.target)
35      setColor ();
36    break;
37  }
38}
39
40document.addEventListener ('DOMContentLoaded', handler, false);
41document.addEventListener ('click', handler, false);
42
43</script>
44
45
46
47

投稿2019/04/24 18:52

退会済みユーザー

総合スコア0

merci_children

2019/04/24 21:39

回答ありがとうございます。恐れ入れますが、できればjqueryを使用したいのですが、jqueryを使った場合どうするべきか教えていただけないでしょうか。

退会済みユーザー

2019/04/24 21:51

単純明快だと思うのだけれど、（崇め奉られ祭られるものには熱心な信仰者が多いね）他の回答を待ってね。ほんとすぐだと思う。^^;

m.ts10806

2019/04/25 00:38

ロジックほぼそのままセレクタ部分とイベント取得部分を変えればいいだけなので新たに回答するまでもないかなと思ってます。

退会済みユーザー

2019/04/25 02:05

私は無宗教信者なもので、マジ異教徒の文化は知らないのです。純粋無垢というか、世間を知らなというか・・・

yambejp

2019/04/25 03:48 編集

私もjQuery大っきらいだったけど、なんとなく覚えましたよあきらかに生jsよりは簡潔に書けますし、逆に公式側がすり寄っていっている感もありますしね。そういう意味ではreact、vue、angularについては私も異教徒感高いですでもそれは単に時代に追いつけなくなっているだけかもしれません老害はjQueryでもやってろ・・・と嘲ってください

退会済みユーザー

2019/04/25 05:13

あら意外!、yambejp さんはどこぞの聖人様かと思っておりました。^^; jQuery を jquery と呼ぶ信者を、教祖様は嘆き悲しんでいるでしょう。あっ $ だったか。

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

ベストアンサー

hai_haiさんのHTML構造をまるぱくって

javascript
1<script>
2$(function(){
3  $('#FUGA').on('click',function(){
4    $('#PIYO').css('color',$('#HOGE').val());
5  }).trigger('click');
6});
7</script>
8<select id="HOGE">
9<option value="red">red
10<option value="green">green
11<option value="blue" selected>blur
12</select>
13<input type="button" value="Change" id="FUGA">
14<div id="PIYO">Test text: abc</div>