Javascriptでローディング画面を表示したい

javascript初心者です。
現在、Djangoを使って検索サイトを作成しています。

その中で、検索ボタンをクリックしたらローディング画面を表示するという機能を、javascriptを使って実装しようとしたのですが、うまくいきませんでした。

（ローディング画面をcssのdisplay:noneで消し、検索ボタンをクリックすると同時にjavascriptでdisplay:blockのclassを付与し、ローディング画面を表示するようにしたいのですが、現在は検索ボタンをクリックしてもローディング画面が現れず何も起きない状態です。）

コンソールにエラーは出ていません。

検索ボタンをクリックすると同時に画面遷移も行っているので、jsに対する非同期処理が必要だと考えているのですが、コードの記述の仕方が分かりません。

ご教授の程お願いいたします。

index.html
1{% load static %}
2
3<!DOCTYPE html>
4
5<html lang="ja">
6
7    <head>
8        <meta charset="UTF-8">
9        <meta name="viewport" content="width=device-width, initial-scale=1.0">
10        <title>VSEO SUGGEST</title>
11        <link rel="stylesheet" type="text/css"
12            href="{% static 'vseo_suggest_app/css/style.css' %}" />
13        <script type="text/javascript" 
14            src="{% static 'vseo_suggest_app/js/script.js' %}"></script>
15    </head>
16
17    <body>
18        <div id="top">
19            <a href>VSEO SUGGESTについて</a>
20             | 
21            <a href>免責事項</a>
22             |
23            <a href>お問い合わせ</a>
24             |
25            <a href>検索履歴</a>
26             |
27            <a href>検索回数ランキング</a>
28        </div>
29
30        <h1>VSEO SUGGEST</h1>
31
32        <div id="main">
33            <h2>サイトVSEOチェック</h2>
34            <div class="form" style="padding: 13px 0px;">
35                <form action="{% url 'form' %}" method="post">
36                    {% csrf_token %}
37                        <ul class="list_input">
38                            <span>キーワード</span>
39                            <li><input id="KEYWORD" type="text" name="KEYWORD" class="input"></li>
40                            <li><input type="submit" value="サジェスト取得" id="submit" class="submit" onclick="load()"></li>**_←ここをクリックしたら_**
41                        </ul>
42                </form>
43                <p>{{msg}}</p>
44            </div>
45        </div>
46
47        <!-- ローディング -->_**ここを表示したい**_
48        <div id="loading" class="loading">
49            <div class="spinner"></div>
50            <p>お待ち下さい...</p>
51            <p class="load_msg_red">※20秒ほど時間がかかります</p>
52        </div>
53
54    </body>
55
56</html>

style.css
1body{
2    font-size: 14px;
3    color: #333;
4    line-height: 120%;
5    background-color: #fff;
6    text-align: center;
7    margin: 0;
8}
9
10#top{
11    background-color: #FF851F;
12    text-align: right;
13    height: 30px;
14    padding: 2px 15px 0 0;
15    color: #fff;
16    font-size: 12px;
17}
18
19#main{
20    max-width: 700px;
21    margin: 0 auto;
22    border: 1px solid #ff4500;
23    border-top: 1px solid #ff4500;
24    clear: both;
25}
26
27h1{
28    display: block;
29    font-size: 2em;
30    margin-block-start: 0.67em;
31    margin-block-end: 0.67em;
32    margin-inline-start: 0px;
33    margin-inline-end: 0px;
34    font-weight: bold;
35}
36
37h2{
38    font-size: 18px;
39    color: #333;
40    margin: 25px 0 10px 20px;
41    padding-left: 28px;
42    text-align: left;
43    font-weight: normal;
44}
45
46ul{
47    list-style: none;
48    padding: 0;
49}
50
51li{
52    width: 100%;
53    display: table;
54}
55
56p{
57    display: block;
58    margin-block-start: 1em;
59    margin-block-end: 1em;
60    margin-inline-start: 0px;
61    margin-inline-end: 0px;
62}
63
64.list_input{
65    margin: 25px auto 0;
66    display: table;
67}
68
69.input{
70    width: 450px;
71    padding: 8px;
72    border: solid 3px #dad4d4;
73    font-size: 13px;
74    box-sizing: border-box;
75}
76
77.submit{
78    width: 250px;
79    margin: 25px 0 auto;
80    padding: 10px;
81    color: #fff;
82    font-size: 16px;
83    border: none;
84    border-radius: 6px;
85    background: #fe8518;
86}
87
88.loading{
89    margin: 64px;
90    display: none;
91}
92
93.loaded{
94    margin: 64px;
95}
96
97.load_msg_red{
98    color: red;
99}
100
101.spinner{
102    margin: 0px auto; 
103    border-radius: 100%; 
104    border-width: 3px; 
105    border-style: solid; 
106    border-color: rgb(33, 150, 243) rgb(238, 238, 238) rgb(238, 238, 238); 
107    border-image: initial; 
108    width: 32px; 
109    height: 32px; 
110    animation: load 0.8s linear 0s infinite;
111}
112
113@keyframes load{
114    0%{
115        transform: rotate(0deg);
116    } 100%{
117        transform: rotate(360deg);
118    }
119}

script.js
1'use strict';
2
3{   
4    function load(){
5        const loading = document.getElementsByClassName('loading');
6        loading.classList.replace('loading','loaded');
7    }    
8}
9

int32_t

2022/04/21 23:27

「うまくいきませんでした」というのは具体的にどういう症状でしょうか。

punbeginner

2022/04/22 02:58

閲覧ありがとうございます。ローディング画面をcssのdisplay:noneで消し、検索ボタンをクリックすると同時にjavascriptでdisplay:blockのclassを付与し、ローディング画面を表示するようにしたいのですが、現在は検索ボタンをクリックしてもローディング画面が現れず何も起きない状態です。

int32_t

2022/04/22 03:07

クリックしたときにブラウザの開発者ツールのコンソールにエラーが出ていませんか。

punbeginner

2022/04/22 09:58 編集

ご返信と大変分かりやすいご回答、誠にありがとうございます！先程コンソールを確認してみたところ、エラーは出ていないようでした… ご回答頂いたコードも試してみたのですが、やはりローディング画面は表示はされませんでした… 折角教えて頂いたのに、申し訳ございません…

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

回答1件

js
1        const loading = document.getElementsByClassName('loading');
2        loading.classList.replace('loading','loaded');

もしコードがこの通りでしたら、「undefined に replace() なんてメソッドはないぞ」という感じのエラーが出ているはずです。

getElementsByClassName() の返り値はコレクションなので、要素を得るにはインデックスを指定する必要があります。

js
1// 例1; loadingの要素が1つだけだとわかっている
2        const loading = document.getElementsByClassName('loading');
3        loading[0].classList.replace('loading','loaded');
4// 例2; loadingの要素が複数ある可能性があるなら
5        for (const loading of document.getElementsByClassName('loading'))
6          loading.classList.replace('loading','loaded');