ボタンにカレントクラスを付与したい

Question

javaScriptが分からない

とんでもないレベルの初心者です。JavaScriptに強い方お助けくださいませ。

ボタン押下時にカレントクラスを付与して、結果をクッキーに保存するJavaScriptを書きたいのですが……。
背景・文字色を変更するボタンを押したとき、白背景が適用されているときはそのボタンが凹み、黒適応時は黒ボタンが凹む。デフォルトで白背景が適応され、ボタン押下の結果がクッキーに保存されるjavaScriptを書きたいです。

発生している問題

ボタンにカレント表示は出来るようになりましたが、結果がクッキーに保存されず、選択した背景が維持されません。特に、試したこと2個目のJavaScriptを書き加えると、ボタン自体が効かなくなります。ボタンを押された凹んだ形状、背景の色はページをまたぐと元に戻ってしまいます。

エラー

Uncaught TypeError: Cannot read property 'match' of undefined
    at HTMLDocument.<anonymous> (jquery.illbenet_novel.js:18)

このエラーが以下に対して出ました。

if ($('#bw_swich').attr('onclick').match(/change2/)) {

ボタンのソースコード

<script type="text/javascript">
　function change1( newColor, newBgColor, newBgColor, newBgColor , newBgColor, newBgColor) {
    document.getElementById('main').style.backgroundColor = newColor;
    document.getElementById('main').style.color = newBgColor;
    document.getElementById('h3').style.color = newBgColor;
    document.getElementById('h4').style.color = newBgColor;
    document.getElementById('honbun_next').style.color = newBgColor;
    document.getElementById('honbun_prev').style.color = newBgColor;    
 }
 function change2( newColor, newBgColor, newBgColor , newBgColor , newBgColor, newBgColor) {
    document.getElementById('main').style.backgroundColor = newColor;
    document.getElementById('main').style.color = newBgColor;
    document.getElementById('h3').style.color = newBgColor;
    document.getElementById('h4').style.color = newBgColor;
    document.getElementById('honbun_next').style.color = newBgColor;   
    document.getElementById('honbun_prev').style.color = newBgColor;   
 }
</script>

<div id="main">
　　<div id="bw_swich">
        <input type="button" value="&#xf15c;" onclick="change2('#fff','#212931','#212931','#212931','#212931','#212931');" id="White" class="far"　 title="白背景">
      　<input type="button" value="&#xf15c;" onclick="change1('#000','#fff','#fff','#fff','#fff','#fff');" id="Black" class="fas" title="黒背景">
   </div>
   <div id="novel">
      <button id="honbun_next"><i title="次のページへ">＜</i></button>         
         <div div id="honbun" class="serif middle">
      <button id="honbun_prev"><i title="前のページへ">＞</i></button>
         </div>
   </div>
</div>

htmlにmain要素は記載しています。

#White.current, #Black.current{～～～装飾～～～}

試したこと

自分で書いてみたコードです。

　　　// White設定ボタン押下時にカレントクラスを付与
	    $("#White").click(function () {
	    // ボタンにカレントクラスを付与
	        $("#White").addClass('current');
	        $("#Black").removeClass('current');
	    // 
	        $('main').remove('change2');
	    // クッキーに選択結果を登録する
	        Cookies.set('cookieColor', 'change2', { expires: 7 });
			return false;
	    });
	// Black設定ボタン押下時にカレントクラスを付与
	    $("#Black").click(function () {
	    // ボタンにカレントクラスを付与
	        $("#Black").addClass('current');
	        $("#White").removeClass('current');
	    // 
	        $('main').remove('change1');
	    // クッキーに選択結果を登録する
	        Cookies.set('cookieColor', 'change1', { expires: 7 });
			return false;
	    });      

さらに

$(document).ready(
	function() {
if (!Cookies.get('cookieColor')) {
            // クッキー未登録時に診断してカレントクラスを付与
            if ($('#bw_swich').attr('onclick').match(/change2/)) {
                $('#White').addClass('current');
                $("#honbun").add('change2');
                $("#honbun").remove('change1');
            } else {
                $('#Black').addClass('current');
                $("#honbun").remove('change2');
                $("#honbun").add('change1');
            }
        } else if (Cookies.get('cookieColor') == 'change2') {
            // クッキー白登録であれば白ボタンにクラス付与
                $('#White').addClass('current');
                $('#Black').removeClass('current');
            // 黒クラス付与
                $("#honbun").add('change2');
                $("#honbun").remove('change1');
        } else if (Cookies.get('cookieColor') == 'change1') {
            // クッキー黒登録であれば黒ボタンにクラス付与
                $('#White').removeClass('current');
                $('#Black').addClass('current');
            // 白クラス付与
                $("#honbun").remove('change2');
                $("#honbun").add('change1');
        }    
}
);

試したこと二個目のjavascriptが効かなくて困っています。どうかお助けください。お願いいたします。

補足情報（ツールのバージョンなど）

chrome最新版、クッキーはこちらからお借りしました（https://illbenet.jp/view/99）クッキーはhtmlと同ディレクトリに置いています。<script src="./js.cookie.js"></script>のJSはhtmlに記載しています。クッキーの動向はサーバー上でテストページを作って見ています。

Comments

[miyabi_pudding]

JavaとJavaScriptは全然違う言語なので、質問文直しましょう。

[erp]

教えてくださりありがとうございます！

[miyabi_pudding]

追加ですみません、下記もお願いします。
・Cookiesは、何かjQueryプラグイン使ってますよね？
そのプラグインの名前など（できればURLも）の掲示もお願いします。
・CSSの掲示がありませんが、そこよりもクラスを付与したいが、できない、って質問でいいですか？
また、これ、Blackの方のボタン押した時は動くと思うのですが、Blackもだめですか？？

[erp]

コメントありがとうございます。

クッキーはこちらからお借りしました（https://illbenet.jp/view/99）
そうですね、クラス付与したいです。
Blackのボタンは動きます！　ただカレント付与ができないんです。

[miyabi_pudding]

一つ、質問が。
<script src="./js.cookie.js"></script>
のJSは、HTML内に入れていますか？
そして、上記JSファイルはHTMLと同じ階層のディレクトリに入れておりますか？
上記のようにしないと、Cookie関数は使用することができません。

[erp]

どちらもやっております。
ですが、ボタンを押された凹んだ形状はページをまたいでも記憶されますが、背景の色はページをまたぐと元に戻ってしまいます。

[miyabi_pudding]

なるほど。
そこも質問に記載いただかないと第三者にはわかりません。
ので、そこも質問本文に記載ください。（ページを跨ぐと元に戻るってことを）
その、"ページを跨ぐと"という情報を元に回答を修正します。

[erp]

了解です！

[miyabi_pudding]

最後の質問です。
これでおそらく結論でます。
ローカルのHTMLファイルをダブルクリックで開いて実験してますか？？

[erp]

テストページを作ってサーバー上で様子見をしています。他のフォントサイズ変更、字体変更、横書き縦書き変更のボタンはクッキーに保存されています。こちらの背景ボタンだけ効きません。

[miyabi_pudding]

ふむ・・・・・・・・・・・
わかりました。もう少しみてみます。

[miyabi_pudding]

何度も何度もすみません、
二個目の構文のなかで、
main要素のクラスに、change2があれば、実行となっていますが、
main要素も、HTMLの記載に含めてもらえませんか？
そこも原因の一つなような気がします。

[miyabi_pudding]

ひとまず、main要素がないと、エラーが発生し、以降の処理（クラスを付与したりなど）は実行されないのはこちらの動作環境では確認できました。
main要素を記載しているかどうかもご確認ください。

[erp]

main要素は記載しています。

「main要素のクラスにchange2があれば実行」というのは、main要素の中に、「ボタンのソースコード」のJavaScriptを書かないといけないということでしょうか？

こちらこそ何度もすみません。

[miyabi_pudding]

いえ、htmlの中にです。
今、HTMLのコードには、inputしかいないので。
mainも含みで記載していただくと助かります。

あと、もう一つ、デベロッパーツールを使い、何か、JS実行上のエラーがでていれば、それも記載お願いします。

[erp]

了解です。
今出先なので回答は明日の朝以降になります。
デベロッパーツールというのは、コードを編集するソフトの事でしょうか？

[miyabi_pudding]

いえ、ブラウザに標準で搭載されている機能です。
Google Chrome デベロッパーツール と検索すれば、使い方がわかります。

Answer 1

各構文のID指定が、小文字スタートになってるからです。
#white → #White
です。

プログラムの世界では、大文字小文字は厳密ですので気をつけましょう。

// White設定ボタン押下時にカレントクラスを付与
        $("#White").click(function () {
        // ボタンにカレントクラスを付与
            $("#White").addClass('current');
            $("#Black").removeClass('current');
        // 
            $('main').remove('change2');
        // クッキーに選択結果を登録する
            Cookies.set('cookieColor', 'change2', { expires: 7 });
            return false;
        });
    // Black設定ボタン押下時にカレントクラスを付与
        $("#Black").click(function () {
        // ボタンにカレントクラスを付与
            $("#Black").addClass('current');
            $("#White").removeClass('current');
        // 
            $('main').remove('change1');
        // クッキーに選択結果を登録する
            Cookies.set('cookieColor', 'change1', { expires: 7 });
            return false;
        });

クッキーが使えない原因

ローカルで、HTMLを開いているからです。
ローカルでの通常実行の場合、ブラウザのセキュリティに引っかかるため、
クッキーへの保存ができません。（下手すると読み込みもできない）
Google Chromeでは特になのですが、最近のブラウザのセキュリティはかなり強いものになりますので、
様々な機能が制限されます。
よって、下記のいずれかをする必要があります。

• ローカルファイルHTMLを開く際に、ブラウザをオプション起動し、CORSを回避する
• XAMPP（Windowsの場合）や、MAMP（macOSの場合）を使い、ローカルサーバーを立てて、httpアクセスでページを開く

上記をやる方法に関しては、本質問要件から逸脱するため、割愛します。
ご自身でやり方を再度調査してください。

以上です。

Comments

[erp]

試したこと一個目は解決しました。ありがとうございます！！

[miyabi_pudding]

ん？
質問文にはそこしか問題の記載ありませんでしたが、まだ問題があるんでしょうか？

[miyabi_pudding]

あ、試したこと二個目ってそういうことか・・・。
クッキーが保存されないってことですか？
だんなら、そこも明記しておいた方がいいですよ。
teratailは、無料で有志で回答しているサイトなので、要件以上のことはやってもらえない、と考えておいた方がいいです。
（少なくとも私は要件以上のことは回答しないようにしてます）
つまり、javascriptが効かないでは、何が起こっているかわからないので明確に起きている問題を明記してほしいってことです。
不明確な内容だったら、タイトルが要件としか判断できません。

[erp]

はい、試したこと二個目のjavascriptが間違っているみたいで、クッキーに保存されません。

なるほど！　勉強になります。

[miyabi_pudding]

勉強になったなら、質問本文をしっかり修正してください。
しかも、クッキーに保存されないのは二個目が原因ではありません。
二個目はクッキーを読み込んでいるだけなので、保存は行っていません。
よって、クッキーが保存されないと、なら一個目が原因です。

[erp]

そうだったんですね。質問文修正致しました。ご指摘ありがとうございます。