teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

調整

2021/10/12 01:45

投稿

yambejp
yambejp

スコア117902

answer CHANGED
@@ -1,2 +1,27 @@
1
1
  submitの場合たいていformによるページの遷移が発生するため
2
- 色を変える前に別のページに移動してしまいます
2
+ 色を変える前に別のページに移動してしまいます
3
+
4
+ # sample
5
+ ```javascript
6
+ <style>
7
+ .btn{
8
+ background-color:#f5f5f5;
9
+ }
10
+ .btn.clicked{
11
+ background-color:#ff0000;
12
+ }
13
+ </style>
14
+ <script>
15
+ window.addEventListener('DOMContentLoaded', ()=>{
16
+ document.querySelectorAll('.btn').forEach(x=>{
17
+ x.addEventListener('click',()=>{
18
+ x.classList.add('clicked');
19
+ setTimeout(()=>x.classList.remove('clicked'),1000);
20
+ });
21
+ });
22
+ });
23
+ </script>
24
+ <input type="button" class="btn" value="1">
25
+ <input type="button" class="btn" value="2">
26
+ <input type="button" class="btn" value="3">
27
+ ```