teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問ボタンにカレントクラスを付与したい

編集履歴

質問編集履歴

18

修正

2020/02/02 02:23

投稿

erp
erp

スコア46

title CHANGED
File without changes
body CHANGED
@@ -13,6 +13,10 @@
13
13
  Uncaught TypeError: Cannot read property 'match' of undefined
14
14
  at HTMLDocument.<anonymous> (jquery.illbenet_novel.js:18)
15
15
  ```
16
+ このエラーが以下に対して出ました。
17
+ ```
18
+ if ($('#bw_swich').attr('onclick').match(/change2/)) {
19
+ ```
16
20
 
17
21
  ### ボタンのソースコード
18
22
 

17

修正

2020/02/02 02:23

投稿

erp
erp

スコア46

title CHANGED
File without changes
body CHANGED
@@ -48,6 +48,7 @@
48
48
  <button id="honbun_prev"><i title="前のページへ">＞</i></button>
49
49
  </div>
50
50
  </div>
51
+ </div>
51
52
  ```
52
53
  htmlにmain要素は記載しています。
53
54
  ```css

16

修正

2020/02/02 02:14

投稿

erp
erp

スコア46

title CHANGED
File without changes
body CHANGED
File without changes

15

修正

2020/02/02 02:13

投稿

erp
erp

スコア46

title CHANGED
File without changes
body CHANGED
@@ -6,7 +6,7 @@
6
6
  背景・文字色を変更するボタンを押したとき、白背景が適用されているときはそのボタンが凹み、黒適応時は黒ボタンが凹む。デフォルトで白背景が適応され、ボタン押下の結果がクッキーに保存されるjavaScriptを書きたいです。
7
7
 
8
8
  ### 発生している問題
9
- ボタンにカレント表示は出来るようになりましたが、結果がクッキーに保存されず、選択した背景が維持されません。特に、試したこと2個目のJavaScriptを書き加えると、ボタン自体が効かなくなります。ボタンを押された凹んだ形状はページをまたいでも記憶されますが、背景の色はページをまたぐと元に戻ってしまいます。
9
+ ボタンにカレント表示は出来るようになりましたが、結果がクッキーに保存されず、選択した背景が維持されません。特に、試したこと2個目のJavaScriptを書き加えると、ボタン自体が効かなくなります。ボタンを押された凹んだ形状、背景の色はページをまたぐと元に戻ってしまいます。
10
10
 
11
11
  ### エラー
12
12
  ```
@@ -37,8 +37,17 @@
37
37
  </script>
38
38
  ```
39
39
  ```html
40
+ <div id="main">
41
+ 　　<div id="bw_swich">
40
- <input type="button" value="&#xf15c;" onclick="change2('#fff','#212931','#212931','#212931','#212931','#212931');" id="White" class="far"　 title="白背景">
42
+ <input type="button" value="&#xf15c;" onclick="change2('#fff','#212931','#212931','#212931','#212931','#212931');" id="White" class="far"　 title="白背景">
41
- <input type="button" value="&#xf15c;" onclick="change1('#000','#fff','#fff','#fff','#fff','#fff');" id="Black" class="fas" title="黒背景">
43
+ 　<input type="button" value="&#xf15c;" onclick="change1('#000','#fff','#fff','#fff','#fff','#fff');" id="Black" class="fas" title="黒背景">
44
+ </div>
45
+ <div id="novel">
46
+ <button id="honbun_next"><i title="次のページへ">＜</i></button>
47
+ <div div id="honbun" class="serif middle">
48
+ <button id="honbun_prev"><i title="前のページへ">＞</i></button>
49
+ </div>
50
+ </div>
42
51
  ```
43
52
  htmlにmain要素は記載しています。
44
53
  ```css

14

修正

2020/02/02 02:10

投稿

erp
erp

スコア46

title CHANGED
File without changes
body CHANGED
@@ -77,34 +77,33 @@
77
77
  ```javascript
78
78
  $(document).ready(
79
79
  function() {
80
- // 画面読み込み時の背景切り替えボタンのカレントクラス付与
81
- if (!Cookies.get('cookieColor')) {
80
+ if (!Cookies.get('cookieColor')) {
82
- // クッキー未登録時に診断してカレントクラスを付与
81
+ // クッキー未登録時に診断してカレントクラスを付与
83
- if ($('main').attr('class').match(/change2/)) {
82
+ if ($('#bw_swich').attr('onclick').match(/change2/)) {
84
- $('#White').addClass('current');
83
+ $('#White').addClass('current');
85
- $("main").addClass('change2');
84
+ $("#honbun").add('change2');
86
- $("main").removeClass('change1');
85
+ $("#honbun").remove('change1');
87
- } else {
86
+ } else {
88
- $('#Black').addClass('current');
87
+ $('#Black').addClass('current');
89
- $("main").removeClass('change2');
88
+ $("#honbun").remove('change2');
90
- $("main").addClass('change1');
89
+ $("#honbun").add('change1');
91
- }
90
+ }
92
- } else if (Cookies.get('cookieColor') == 'change2') {
91
+ } else if (Cookies.get('cookieColor') == 'change2') {
93
- // クッキー白登録であれば白ボタンにクラス付与
92
+ // クッキー白登録であれば白ボタンにクラス付与
94
- $('#White').addClass('current');
93
+ $('#White').addClass('current');
95
- $('#Black').removeClass('current');
94
+ $('#Black').removeClass('current');
96
- // 黒クラス付与
95
+ // 黒クラス付与
97
- $("main").addClass('change2');
96
+ $("#honbun").add('change2');
98
- $("main").removeClass('change1');
97
+ $("#honbun").remove('change1');
99
- } else if (Cookies.get('cookieColor') == 'change1') {
98
+ } else if (Cookies.get('cookieColor') == 'change1') {
100
- // クッキー黒登録であれば黒ボタンにクラス付与
99
+ // クッキー黒登録であれば黒ボタンにクラス付与
101
- $('#White').removeClass('current');
100
+ $('#White').removeClass('current');
102
- $('#Black').addClass('current');
101
+ $('#Black').addClass('current');
103
- // 白クラス付与
102
+ // 白クラス付与
104
- $("main").removeClass('change2');
103
+ $("#honbun").remove('change2');
105
- $("main").addClass('change1');
104
+ $("#honbun").add('change1');
106
- }
105
+ }
107
- }
106
+ }
108
107
  );
109
108
  ```
110
109
  試したこと二個目のjavascriptが効かなくて困っています。どうかお助けください。お願いいたします。

13

修正

2020/02/02 02:02

投稿

erp
erp

スコア46

title CHANGED
File without changes
body CHANGED
@@ -8,6 +8,12 @@
8
8
  ### 発生している問題
9
9
  ボタンにカレント表示は出来るようになりましたが、結果がクッキーに保存されず、選択した背景が維持されません。特に、試したこと2個目のJavaScriptを書き加えると、ボタン自体が効かなくなります。ボタンを押された凹んだ形状はページをまたいでも記憶されますが、背景の色はページをまたぐと元に戻ってしまいます。
10
10
 
11
+ ### エラー
12
+ ```
13
+ Uncaught TypeError: Cannot read property 'match' of undefined
14
+ at HTMLDocument.<anonymous> (jquery.illbenet_novel.js:18)
15
+ ```
16
+
11
17
  ### ボタンのソースコード
12
18
 
13
19
  ```javascript

12

2020/02/02 01:59

投稿

erp
erp

スコア46

title CHANGED
File without changes
body CHANGED
@@ -34,6 +34,7 @@
34
34
  <input type="button" value="&#xf15c;" onclick="change2('#fff','#212931','#212931','#212931','#212931','#212931');" id="White" class="far"　 title="白背景">
35
35
  <input type="button" value="&#xf15c;" onclick="change1('#000','#fff','#fff','#fff','#fff','#fff');" id="Black" class="fas" title="黒背景">
36
36
  ```
37
+ htmlにmain要素は記載しています。
37
38
  ```css
38
39
  #White.current, #Black.current{～～～装飾～～～}
39
40
  ```

11

2020/01/28 08:40

投稿

erp
erp

スコア46

title CHANGED
File without changes
body CHANGED
@@ -105,4 +105,4 @@
105
105
 
106
106
  ### 補足情報（ツールのバージョンなど）
107
107
 
108
- chrome最新版、クッキーはこちらからお借りしました（https://illbenet.jp/view/99）クッキーはhtmlと同ディレクトリに置いています。<script src="./js.cookie.js"></script>のJSはhtmlに記載しています。
108
+ chrome最新版、クッキーはこちらからお借りしました（https://illbenet.jp/view/99）クッキーはhtmlと同ディレクトリに置いています。<script src="./js.cookie.js"></script>のJSはhtmlに記載しています。クッキーの動向はサーバー上でテストページを作って見ています。

10

2020/01/28 08:10

投稿

erp
erp

スコア46

title CHANGED
File without changes
body CHANGED
@@ -105,4 +105,4 @@
105
105
 
106
106
  ### 補足情報（ツールのバージョンなど）
107
107
 
108
- chrome最新版、クッキーはこちらからお借りしました（https://illbenet.jp/view/99）クッキーはhtmlと同ディレクトリに置いています。
108
+ chrome最新版、クッキーはこちらからお借りしました（https://illbenet.jp/view/99）クッキーはhtmlと同ディレクトリに置いています。<script src="./js.cookie.js"></script>のJSはhtmlに記載しています。

9

2020/01/28 07:45

投稿

erp
erp

スコア46

title CHANGED
File without changes
body CHANGED
@@ -6,7 +6,7 @@
6
6
  背景・文字色を変更するボタンを押したとき、白背景が適用されているときはそのボタンが凹み、黒適応時は黒ボタンが凹む。デフォルトで白背景が適応され、ボタン押下の結果がクッキーに保存されるjavaScriptを書きたいです。
7
7
 
8
8
  ### 発生している問題
9
- ボタンにカレント表示は出来るようになりましたが、結果がクッキーに保存されず、選択した背景が維持されません。特に、試したこと2個目のJavaScriptを書き加えると、ボタン自体が効かなくなります。
9
+ ボタンにカレント表示は出来るようになりましたが、結果がクッキーに保存されず、選択した背景が維持されません。特に、試したこと2個目のJavaScriptを書き加えると、ボタン自体が効かなくなります。ボタンを押された凹んだ形状はページをまたいでも記憶されますが、背景の色はページをまたぐと元に戻ってしまいます。
10
10
 
11
11
  ### ボタンのソースコード
12
12
 

8

2020/01/28 07:44

投稿

erp
erp

スコア46

title CHANGED
File without changes
body CHANGED
@@ -105,4 +105,4 @@
105
105
 
106
106
  ### 補足情報（ツールのバージョンなど）
107
107
 
108
- chrome最新版、クッキーはこちらからお借りしました（https://illbenet.jp/view/99）
108
+ chrome最新版、クッキーはこちらからお借りしました（https://illbenet.jp/view/99）クッキーはhtmlと同ディレクトリに置いています。

7

2020/01/28 07:39

投稿

erp
erp

スコア46

title CHANGED
File without changes
body CHANGED
@@ -6,7 +6,7 @@
6
6
  背景・文字色を変更するボタンを押したとき、白背景が適用されているときはそのボタンが凹み、黒適応時は黒ボタンが凹む。デフォルトで白背景が適応され、ボタン押下の結果がクッキーに保存されるjavaScriptを書きたいです。
7
7
 
8
8
  ### 発生している問題
9
- カレントクラスを付与できません。試したこと二個目に記載したjavaScriptが違うようで、クッキーに保存されません。
9
+ ボタンにカレント表示は出来るようになりましたが、結果がクッキーに保存されず、選択した背景が維持されません。特に、試したこと2個目のJavaScriptを書き加えると、ボタン自体が効かなくなります。
10
10
 
11
11
  ### ボタンのソースコード
12
12
 

6

変更

2020/01/28 07:21

投稿

erp
erp

スコア46

title CHANGED
File without changes
body CHANGED
@@ -6,7 +6,7 @@
6
6
  背景・文字色を変更するボタンを押したとき、白背景が適用されているときはそのボタンが凹み、黒適応時は黒ボタンが凹む。デフォルトで白背景が適応され、ボタン押下の結果がクッキーに保存されるjavaScriptを書きたいです。
7
7
 
8
8
  ### 発生している問題
9
- カレントクラスを付与できません。試したこと二個目のクッキーが保存されません。やり方がわからないので、何が間違っているのか分かりません。
9
+ カレントクラスを付与できません。試したこと二個目に記載したjavaScriptが違うようで、クッキーに保存されません。
10
10
 
11
11
  ### ボタンのソースコード
12
12
 

5

変更

2020/01/28 04:33

投稿

erp
erp

スコア46

title CHANGED
File without changes
body CHANGED
@@ -6,7 +6,7 @@
6
6
  背景・文字色を変更するボタンを押したとき、白背景が適用されているときはそのボタンが凹み、黒適応時は黒ボタンが凹む。デフォルトで白背景が適応され、ボタン押下の結果がクッキーに保存されるjavaScriptを書きたいです。
7
7
 
8
8
  ### 発生している問題
9
- カレントクラスを付与できません。やり方がわからないので、何が間違っているのか分かりません。
9
+ カレントクラスを付与できません。試したこと二個目のクッキーが保存されません。やり方がわからないので、何が間違っているのか分かりません。
10
10
 
11
11
  ### ボタンのソースコード
12
12
 

4

変更

2020/01/28 04:29

投稿

erp
erp

スコア46

title CHANGED
File without changes
body CHANGED
@@ -44,9 +44,9 @@
44
44
 
45
45
  ```javascript
46
46
  　　　// White設定ボタン押下時にカレントクラスを付与
47
- $("#white").click(function () {
47
+ $("#White").click(function () {
48
48
  // ボタンにカレントクラスを付与
49
- $("#white").addClass('current');
49
+ $("#White").addClass('current');
50
50
  $("#Black").removeClass('current');
51
51
  //
52
52
  $('main').remove('change2');
@@ -58,7 +58,7 @@
58
58
  $("#Black").click(function () {
59
59
  // ボタンにカレントクラスを付与
60
60
  $("#Black").addClass('current');
61
- $("#white").removeClass('current');
61
+ $("#White").removeClass('current');
62
62
  //
63
63
  $('main').remove('change1');
64
64
  // クッキーに選択結果を登録する
@@ -100,7 +100,7 @@
100
100
  }
101
101
  );
102
102
  ```
103
- 困っています。どうかお助けください。お願いいたします。
103
+ 試したこと二個目のjavascriptが効かなくて困っています。どうかお助けください。お願いいたします。
104
104
 
105
105
 
106
106
  ### 補足情報（ツールのバージョンなど）

3

変更

2020/01/28 03:37

投稿

erp
erp

スコア46

title CHANGED
File without changes
body CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  とんでもないレベルの初心者です。JavaScriptに強い方お助けくださいませ。
4
4
 
5
- ボタン押下時にカレントクラスを付与して、結果をクッキーに保存するJavaを書きたいのですが……。
5
+ ボタン押下時にカレントクラスを付与して、結果をクッキーに保存するJavaScriptを書きたいのですが……。
6
6
  背景・文字色を変更するボタンを押したとき、白背景が適用されているときはそのボタンが凹み、黒適応時は黒ボタンが凹む。デフォルトで白背景が適応され、ボタン押下の結果がクッキーに保存されるjavaScriptを書きたいです。
7
7
 
8
8
  ### 発生している問題

2

変更

2020/01/28 03:10

投稿

erp
erp

スコア46

title CHANGED
File without changes
body CHANGED
@@ -105,4 +105,4 @@
105
105
 
106
106
  ### 補足情報（ツールのバージョンなど）
107
107
 
108
- chrome最新版
108
+ chrome最新版、クッキーはこちらからお借りしました（https://illbenet.jp/view/99）

1

質問文変更

2020/01/28 03:02

投稿

erp
erp

スコア46

title CHANGED
File without changes
body CHANGED
@@ -1,9 +1,9 @@
1
- ### javaが分からない
1
+ ### javaScriptが分からない
2
2
 
3
3
  とんでもないレベルの初心者です。JavaScriptに強い方お助けくださいませ。
4
4
 
5
5
  ボタン押下時にカレントクラスを付与して、結果をクッキーに保存するJavaを書きたいのですが……。
6
- 背景・文字色を変更するボタンを押したとき、白背景が適用されているときはそのボタンが凹み、黒適応時は黒ボタンが凹む。デフォルトで白背景が適応され、ボタン押下の結果がクッキーに保存されるjavaを書きたいです。
6
+ 背景・文字色を変更するボタンを押したとき、白背景が適用されているときはそのボタンが凹み、黒適応時は黒ボタンが凹む。デフォルトで白背景が適応され、ボタン押下の結果がクッキーに保存されるjavaScriptを書きたいです。
7
7
 
8
8
  ### 発生している問題
9
9
  カレントクラスを付与できません。やり方がわからないので、何が間違っているのか分かりません。