https://with-house.jp/contact/js/click.js

1// お問い合わせ種別
2let switchBtnOpen = document.getElementsByClassName('Information')[0];
3let switchBtnClose = document.getElementsByClassName('consultation')[0];
4let post = document.getElementById('post');
5
6// 希望の送付方法
7let receiveMail = document.getElementsByClassName('get-mail')[0];
8let receivePost = document.getElementsByClassName('get-post')[0];
9let domicile = document.getElementById('domicile');
10
11
12// 郵便番号
13let postal = document.getElementById('postal');
14
15// ご住所
16let address = document.getElementById('address');
17
18let list = [postal, address];
19
20// 生年月日
21let birth = document.getElementById('birth');
22let birthday = document.getElementById('birthday');
23
24// お問い合わせ内容
25let inquiries = document.getElementById('inquiries');
26
27//メンバーズクラブ無料登録
28let receiveJoin = document.getElementsByClassName('join')[0];
29let receiveNoJoin = document.getElementsByClassName('no-join')[0];
30
31
32// 関数
33// お問い合わせ種別
34switchBtnOpen.addEventListener('click', () => {
35  changeElementOpen(post);
36  // 必須削除
37  changeRequiredRemove(inquiries)
38  // 任意追加
39  changeninniAdd(inquiries)
40  // 郵送で受け取るがが押されていたら
41  let input_method = document.querySelector("input[name=method]:checked");
42  let input_membership = document.querySelector("input[name=membership]:checked");
43
44  if (input_method.value == "郵送で受け取る" || input_method.value == "メールで受け取る" && input_membership.value == "登録する") {
45    changeElementOpen(domicile);
46    list.forEach(value => {
47      RequiredAdd(value)
48    })
49  } else {
50    changeElementClose(domicile);
51    // 必須削除
52    list.forEach(value => {
53      RequiredRemove(value)
54    })
55  }
56}, false);
57
58switchBtnClose.addEventListener('click', () => {
59  changeElementClose(post);
60  // 住所閉じる
61
62
63  let input_membership = document.querySelector("input[name=membership]:checked");
64  if (input_membership.value == "登録する") {
65    changeElementOpen(domicile);
66  } else {
67    changeElementClose(domicile);
68  }
69
70  // 必須追加
71  changeRequiredAdd(inquiries);
72  // 任意削除
73  changeninniRemove(inquiries)
74
75  // 必須削除
76  list.forEach(value => {
77    RequiredRemove(value);
78  })
79}, false);
80
81
82// 希望の送付方法
83receiveMail.addEventListener('click', () => {
84  //メンバーズクラブ無料登録の登録するが押されていたら
85  let input_method = document.querySelector("input[name=membership]:checked");
86  if (input_method.value == "登録する") {
87    changeElementOpen(domicile);
88  } else {
89    changeElementClose(domicile);
90  }
91
92
93
94  list.forEach(value => {
95    RequiredRemove(value);
96  });
97  PatternRemove(postal);
98}, false);
99
100receivePost.addEventListener('click', () => {
101  changeElementOpen(domicile);
102
103  list.forEach(value => {
104    RequiredAdd(value)
105  });
106  PatternAdd(postal)
107}, false);
108
109// 無料入会
110// 登録する
111receiveJoin.addEventListener('click', () => {
112  changeElementOpen(birth);
113  changeElementOpen(domicile);
114  //
115  RequiredAdd(birthday)
116  PatternAdd(birthday)
117}, false);
118
119// 登録しない
120receiveNoJoin.addEventListener('click', () => {
121  changeElementClose(birth);
122
123  let input_method = document.querySelector("input[name=method]:checked");
124  let input_contents = document.querySelector("input[name=contents]:checked");
125  if (input_method.value == "メールで受け取る" || input_contents.value == "お問い合わせ") {
126    changeElementClose(domicile);
127  }
128
129  //
130  RequiredRemove(birthday)
131  PatternRemove(birthday)
132
133}, false);
134
135
136// 共通
137let changeElementOpen = (el) => {
138  el.classList.add('active');
139}
140
141let changeElementClose = (el) => {
142  el.classList.remove('active');
143}
144
145
146// 必須マーク
147let changeRequiredAdd = (el) => {
148  el.classList.add('hissu');
149}
150
151
152let changeRequiredRemove = (el) => {
153  el.classList.remove('hissu');
154}
155
156// 必須マーク
157let changeninniAdd = (el) => {
158  el.classList.add('ninni');
159}
160
161
162let changeninniRemove = (el) => {
163  el.classList.remove('ninni');
164}
165
166
167
168
169