おみくじ：ボタンを押すと画像が動くことについて

ボタンをクリック後、画像が動く

CSSとJavaScriptでおみくじを作っています。
二つボタンを作り、１つ目のボタンを押すとおみくじを引き、
２つ目のボタンで、リロードします。
1つ目のボタンは、クリック→おみくじ画像が動く→おみくじを引く（画像が止まる）という動作を試みています。

全くの初心者で、こちらでご質問して良いのか迷いましたが、
解決が出来ず、混乱しています。
大変恐縮ですが、ご教示いただけますと幸いです。
何卒よろしくお願い致します。

発生している問題・エラーメッセージ

ボタンを押しても、画像が動きません

該当のソースコード

HTML
1.container {
2    width: 70%;
3    margin: auto;
4    text-align: center;
5    position:relative;
6    top: 80px;
7    z-index: 2;
8}
9
10.button_box {
11    padding: 3px;
12    text-align: center;
13    display:flex;
14    justify-content: center; 
15}
16
17#start_button, #return_button { 
18    width:80px;
19    height:80px;
20    padding:10px;
21    margin:3px 8px;
22    border-radius:80%;
23    border: solid 0.5px #000000;
24    background: #ffffff;
25    display: flex; 
26    justify-content: center;
27    align-items: center;
28    cursor: pointer;
29 }
30
31 button:hover {
32    color:#928b88;
33    cursor: pointer; 
34}
35
36#start_button, #return_button{
37    box-shadow: none;
38    position: relative;
39    top: 5px;
40}
41 
42
43.kuji {
44    width: 60%;
45   }
46
47.start_button.open #kuji {
48        visibility: visible;
49    }
50
51.start_button.open {
52            animation-name:shap;
53            animation-duration:1s;
54        }
55        
56        /*kujiのスタートを押すと動く*/
57@keyframes shap {
58    0% {
59        top:40px;
60        left:50px;
61    }
62    10% {
63        top:20px;
64        left:50px;
65    }
66    20% {
67        top:40px;
68        left:50px;
69    }
70    90% {
71        top:20px;
72        left:50px;
73    }
74    100% {
75        top:40px;
76        left:50px;
77    }
78}
79
80<!DOCTYPE html>
81<html lang="ja">
82<head>
83    <meta charset="UTF-8">
84    <title>KUJI</title>
85</head>
86<body>
87       
88<div id="wrapper">       
89    <!-- content　-->
90    <div class="container">
91        <img src="images/bonbonnokuji/start.png" class="kuji animation">
92
93        <div class="button_box">
94        <p><button id="start_button" type="button" onclick="drawkuji();stopkuji()">くじを引く</button></p>
95        <p><button id="return_button" type="button" onclick="returnkuji()">もう一度引く</button></p>
96        </div>
97    </div>
98</div>
99<SCRIPT>
100//おみくじをランダムに表示する
101function drawkuji() {
102    let randomNumber = Math.floor(Math.random() * 5 + 1);
103    document.getElementsByClassName("kuji")[0].setAttribute('src', `images/bonbonnokuji/kuji${randomNumber}.png`);　
104}
105
106function stopkuji(){
107    document.getElementById("start_button");
108    start_button.disabled = true;
109    document.querySelectorAll("button")[0].innerHTML = "押せない"; 
110}
111
112function returnkuji(){
113    location.reload();
114    document.getElementsByClassName("returnkuji")[0].innerHTML = "もう一度引く"; 
115  }
116  
117</SCRIPT>
118</body>
119</html>
120
121

試したこと

cssの@keyframesのアニメーションで画像を動かそうと試みました。

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

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

css
1.start_button.open {
2            animation-name:shap;
3            animation-duration:1s;
4        }

となっているので、アニメーションするにはopenというクラスをつけないといけないですが、JavaScriptにはそのようなコードがないようです。
動かないのはそれが原因ではないでしょうか。

投稿2021/11/04 06:43

Lhankor_Mhy

総合スコア36254

season21

2021/11/04 09:25

ご教示いただき大変ありがとうございます。 openのクラス、見逃しておりました。解決に近づいてきました。今後ともよろしくお願い致します。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！