ボタンを押したときに1～2秒ほどローディング画像が表示されるようにしたいのですが、、、

Question

下のプログラムで「結果を表示する」のボタンを押したときに１～２秒ほどローディング画像の表示＆フェードアウトするようにしたいのですが、ボタンを押す前からローディング画像が表示されてしまうなど、なかなかうまくいきません。

このプログラムのジャバスクリプトにどうやって記述すればできるようになるのか、教えていただけますでしょうか。

色々調べて、とりあえず下記リンクのサイトなどのやり方を参考に、あれこれやっているのですがローディング画像が思うように表示されないのです。。。

/////////////////////////////////////////////////
参考にしたサイト（２つ）

http://blue-bear.jp/kb/javascript-%E5%87%A6%E7%90%86%E4%B8%AD%E3%81%AB%E3%83%AD%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AE%E7%94%BB%E9%9D%A2%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%97%E3%81%A6%E3%80%81%E5%87%A6/?fbclid=IwAR3iay0oWIptezzx3XWdbEPmCq2Uj02k9RNLiLRLVm-aTos1gZJsbgtDshs

https://haniwaman.com/loading/?fbclid=IwAR0g5WSlyiEEb-fHzPBHdfqbpcrMUebDUrgKtvZycf6oL1ljkT85zD07hiQ

/////////////////////////////////////////////////

ローディング画像はCSSでつくったので、あとはボタンを押せば、ローディング画像が表示されるように、ジャバスクリプトを記述すれば良いだけだと思うのですが、どういった記述をすれば良いかが分かりません。

<script type="text/javascript"> // ◆◆◆ファンクション名◆◆◆ function keisan() { ////////////////////////////////// この部分にどういったスクリプトを記述すれば良いかが分からない ////////////////////////////////// // ◆◆◆入力された（anser）の定義◆◆◆ var anser1 = (document.querySelector('#anser1').value); var anser2 = (document.querySelector('#anser2').value); // ◆◆◆関数設定◆◆◆ var word1 = 'あいうえお'; var word2 = 'ＡＢＣＤＥＦ'; // ◆◆◆テーブル設定◆◆◆ var table1 =`<table style="width:300px;"><tbody><tr><td>`; var table2 =`</td></tr><tr><th>`; var table3 =`</th></tr></tbody></table>`; // ◆◆◆結果の表示◆◆◆ document.querySelector('#anserall').innerHTML = table1+word1+anser1+table2+word2+anser2+table3; } </script>

// html部分

<form>
<input id="anser1" type="number" placeholder="0">
<br>
<input id="anser2" type="number" placeholder="0">
<br>
<input type="button" value="結果を表示する" onclick="keisan();">
<br>
<div id="anserall" style="white-space:pre;"></div>
</form>


//ジャバスクリプト

<script type="text/javascript">
// ◆◆◆ファンクション名◆◆◆
function keisan() {
// ◆◆◆入力された（anser）の定義◆◆◆
var anser1 = (document.querySelector('#anser1').value);
var anser2 = (document.querySelector('#anser2').value);
// ◆◆◆関数設定◆◆◆
var word1 = 'あいうえお'; 
var word2 = 'ＡＢＣＤＥＦ'; 
// ◆◆◆テーブル設定◆◆◆
var table1 =`<table style="width:300px;"><tbody><tr><td>`;
var table2 =`</td></tr><tr><th>`;
var table3 =`</th></tr></tbody></table>`;
// ◆◆◆結果の表示◆◆◆
document.querySelector('#anserall').innerHTML = table1+word1+anser1+table2+word2+anser2+table3;
}
</script>

=========
　　
//　CSS　ローディング画像

 #loading {
 display: table;
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background-color: #fff;
 opacity: 0.8;
}
 
#loading .loadingMsg {
 display: table-cell;
 text-align: center;
 vertical-align: middle;
 padding-top: 140px;
 background: url("img/loading.gif") center center no-repeat;
}

Comments

[m.ts10806]

タグはJavaではなくJavaScriptでは。
https://teratail.com/tags/Java
https://eng-entrance.com/java-javascript
そこを間違えてしまうと「Java」を得意としている人しか見ないので回答を得られる機会を失していることになります。
また[inline]など[]書きの記述は何でしょうか？
HTML内の記述であればHTMLの記法で書いてください。どのような環境で確認されているかもあわせて記載してください。
あと、コードブロックはファイル毎にわけてもらえたらと。

質問は編集できますので適宜ご対応ください。

[m.ts10806]

あと、もうひとつ。
「ダメでした」「うまくいきませんでした」
他人には何も伝わらない表現方法なので、具体的に起きた現象を書いてください。

[TreesShimi]

mts10806さん、たいへん失礼しました。
とりあえずタグ等を修正しました。

[TreesShimi]

確認している環境はPCでブラウザはクロームです

[m.ts10806]

ちょっと聞き方が悪かったですが、確認したかったのは
[script type="text/javascript"]
という書き方が有効な環境です。何かしらのフレームワークをお使いなのでしょうか。
これもタグなので通常は
<script> のようなもののはずです。

[TreesShimi]

ワードプレスを使って試していました。
すいません、<script>に修正しますね。

[m.ts10806]

WordPressだと色んな前提が崩れます。
もしかしたらWordPress向けの回答の方が良いかもしれません。
念のため「WordPress」をタグに追加しておいてください。

[m.ts10806]

※ただ、私はWordPress環境がないので、WordPressというのは関係のない回答をしようと思っています。

[TreesShimi]

承知しました。ちなみにWPはこのプログラムを試す際に使っただけなので、たぶん大丈夫です。ありがとうございます。

Answer 1

「コードブロックはファイル毎にわけてもらえたらと。」というのはコードを以下のように分けて欲しかったためのコメントです

※インデント勝手につけました。可読性は大事です
「言語名　整形」とかで出てくるサービスを利用するか、できれば整形機能があるエディタを使ってください

<form>
  <input id="anser1" type="number" placeholder="0">
  <br>
  <input id="anser2" type="number" placeholder="0">
  <br>
  <input type="button" value="結果を表示する" onclick="keisan();">
  <br>
  <div id="anserall" style="white-space:pre;"></div>
</form>

// ◆◆◆ファンクション名◆◆◆
function keisan() {
	// ◆◆◆入力された（anser）の定義◆◆◆
	var anser1 = (document.querySelector('#anser1').value);
	var anser2 = (document.querySelector('#anser2').value);
	// ◆◆◆関数設定◆◆◆
	var word1 = 'あいうえお';
	var word2 = 'ＡＢＣＤＥＦ';
	// ◆◆◆テーブル設定◆◆◆
	var table1 = `<table style="width:300px;"><tbody><tr><td>`;
	var table2 = `</td></tr><tr><th>`;
	var table3 = `</th></tr></tbody></table>`;
	// ◆◆◆結果の表示◆◆◆
	document.querySelector('#anserall').innerHTML = table1 + word1 + anser1 +
		table2 + word2 + anser2 + table3;
}

#loading {
 display: table;
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background-color: #fff;
 opacity: 0.8;
}

#loading .loadingMsg {
 display: table-cell;
 text-align: center;
 vertical-align: middle;
 padding-top: 140px;
 background: url("img/loading.gif") center center no-repeat;
}

本題

まずはHTML上にローディングをHTMLとして置いてあげます。
CSS的にfixedなのでおおよそどこに置いても同じはずなので、とりあえず冒頭に

<div id="loading">
    <div class="loadingMsg"></div>
</div>
<form>
  <input id="anser1" type="number" placeholder="0">
  <br>
  <input id="anser2" type="number" placeholder="0">
  <br>
  <input type="button" value="結果を表示する" onclick="keisan();">
  <br>
  <div id="anserall" style="white-space:pre;"></div>
</form>

※loading.gifはネットから適当に拾ってきました。

「クリックしたときに」が条件なので、非表示にします。

<div id="loading" style="display:none;">
    <div class="loadingMsg"></div>
</div>
<form>
  <input id="anser1" type="number" placeholder="0">
  <br>
  <input id="anser2" type="number" placeholder="0">
  <br>
  <input type="button" value="結果を表示する" onclick="keisan();">
  <br>
  <div id="anserall" style="white-space:pre;"></div>
</form>

「１～２秒ほど表示する」とのことなので、プログラム的にはクリック時に表示して指定した時間が経過したら非表示にすると言う風になります。

とりあえず表示させます。

function keisan() {
	// ◆◆◆入力された（anser）の定義◆◆◆
	var anser1 = (document.querySelector('#anser1').value);
	var anser2 = (document.querySelector('#anser2').value);
      
    var loader = document.getElementById('loading');
    loader.style.display = '';//blockではなく、空にする（でないとdisplay:table;を上書きしてしまうので元の表示ではなくなる）
//後略
//

「任意の時間経過後に処理を～～」というのはsetTimeOut()という関数が有用です。

function keisan() {
	// ◆◆◆入力された（anser）の定義◆◆◆
	var anser1 = (document.querySelector('#anser1').value);
	var anser2 = (document.querySelector('#anser2').value);
      
    var loader = document.getElementById('loading');
    loader.style.display = '';
    setTimeout(endLoader,2000);

//中略

function endLoader(){
    var loader = document.getElementById('loading');
    loader.style.display = 'none';
}

クリック前

クリック時

２秒経過後

蛇足

今回は質問者さんのコードに乗せる形で作りはしたのですが、
要件をもう少し細かく詰めてもらえればもっと適切な組み方があるように思います。
WordPressとのことで確かデフォルトでjQuery読み込むようになってたはずなので、
jQuery利用したほうが簡潔に組めるといえば組めますし、アニメーションも楽にできます。
※PureJavaScriptの方が動作が速く、jQueryから離れる動きもありますが、私はこちらの方が書きやすいのでまだまだ使っていっています。

  <input type="button" value="結果を表示する" id="result">

    #result_table{
        width:300px;
    }

$(function(){
    $('#anserall').hide();
    $("#result").on('click',function(){
        $("#loading").fadeIn();
        setTimeout(endLoader,2000);
        const anser1 = $('#anser1').val();
        const anser2 = $('#anser2').val();

        const word1 = 'あいうえお';
        const word2 = 'ＡＢＣＤＥＦ';
        
        let result_table = $('<table></table>',{
            'id':'result_table'
        });
        
        let tbody = $('<tbody></tbody>');
        let td = $('<tr><td></td></tr>');
        td.text(word1 + anser1);
        let th = $('<tr><th></th></tr>');
        th.text(word2 + anser2);
        tbody.append(td);
        tbody.append(th);
        
        result_table.append(tbody);        
        $("#anserall").append(result_table);
        
    });
});

const endLoader = function(){
    $("#loading").fadeOut();
    $('#anserall').show();
};

Comments

[TreesShimi]

mts10806さん、大変丁寧なご回答とアドバイスをいただき本当にありがとうございます！
さっそく試してみたところ、うまく表示できるようになりました。
2日間悩みまくっていたのですが、おかげさまで今日はぐっすり眠れそうです笑
mts10806さんの貴重なお時間をさいていただき心より感謝申し上げます。

[m.ts10806]

まだ寝るには早いですよー。

やり方としては「プログラムで組みたいことを文章化して、１つ１つ組み立てる」ということだと思います。
確かに要件は「ローディングを表示したい！」ですが、プログラムは手続きで実行されていくものなので、その手続きにあわせた形で文章化していく必要があります。できれば箇条書きで。
「仕様書」はその手続きにそって書きます。
今回ですと
・クリックをする
・ローディングアニメーションが表示される
・一定時間経過後、ローディングアニメーションが消える
ですね。
細分化することでキーワードも出てくるので、検索でも引っかかりやすくなってきます。「自分がやりたいことそのまま」って大体ないと思って良いです。

これができるようになるといわゆる「ロジック」部分が育ってくるので
少し複雑な要件でも整理できるようになり、自分でも組めるようになってきます。
がんばってください。

[TreesShimi]

承知しました。まだまだがんばります！ありがとうございます（＾＾）

[TreesShimi]

何度もすいません、ローディング画像の直下に「計算中、、、」という文字を表示したいのですが、その場合はCSSにどう記述すれば良いのでしょうか？

[TreesShimi]

新しい質問はコメントではなく新たな質問の項目を立てた方がよいのでしょうか？

[m.ts10806]

どこにどのように表示したいかによります。
それも「仕様」なので、まずは「手続き的にどうなるか」流れを考えて書き出して、そこからプログラムにおこすようにしてください。

[TreesShimi]

了解しました！
それと、今回教えていただいたジャバスクリプトですが、PCでは正常に動作するのですが、スマホだと動作しないんですよ。

// ◆◆◆ローディング画像の表示◆◆◆
var loader = document.getElementById('loading');
loader.style.display = '';
setTimeout(endLoader,1500);
function endLoader(){
var loader = document.getElementById('loading');
loader.style.display = 'none';
}

いま一所懸命に理由を探っているのですが、これはやっぱりジャバスクリプトではなく、他に原因がある可能性が高いですよね？

[TreesShimi]

CSSの問題でしょうか？

[m.ts10806]

今PCしか手元に検証環境ないですが、コード全体提示できますか？
↑のコメントの書き方だとfunctionの中にfunctionがあるような作りになってますが、実際はどうなのでしょうか？
※「中略」としたのでそこがうまく伝わらなかったのかもしれませんが・・

[TreesShimi]

全体表示はめちゃくちゃ長くなるので中略したものを提示しますね。
たしかにfunctionの中にfunctionがあります。。。

[m.ts10806]

ああ、であれば、ひとまずendLoader()の１グループは外に出してください。

[TreesShimi]

<script type="text/javascript">
function tohokukeisan() {
// ◆◆◆ローディング画像の表示◆◆◆
var loader = document.getElementById('loading');
loader.style.display = '';
setTimeout(endLoader,800);
function endLoader(){
var loader = document.getElementById('loading');
loader.style.display = 'none';
}
// ◆◆◆入力されたkの定義◆◆◆
var k = (document.querySelector('#k').value);
// ◆◆◆入力されたpriceの定義◆◆◆
var price = (document.querySelector('#price').value);
// ◆◆◆選択された月（month）の仮定義◆◆◆
var month={"month1":2785551,"month2":2550871,"month3":2506644,"month4":2164076,"month5":1748849,"month6":1438042,"month7":1520288,"month8":1720069,"month9":1540145,"month10":1475095,"month11":1861895,"month12":2331418};
var selectmonth = month[document.querySelector('#month').value];
// ◆◆◆選択された月（realmonth）の定義◆◆◆
var realmonth={"month1":1,"month2":2,"month3":3,"month4":4,"month5":5,"month6":6,"month7":7,"month8":8,"month9":9,"month10":10,"month11":11,"month12":12};
var selectrealmonth = realmonth[document.querySelector('#month').value];

＜＜中略＞＞

// ◆◆◆計算結果の表示◆◆◆
document.querySelector('#ansall').innerHTML = table1+conma.format(Math.floor(kw1 + kw2 + kw3 + kw4 + kw5 + kw6 + kw7 + kw8 + kw9 + kw10 + kw11 + kw12))+table2+selectamp+table3+conma.format(Math.floor(tohokuansall))+table4+selectrealmonth+table5+conma.format(Math.floor(price))+table6+space+machinami+space +("\n")+
[
{val:helloansall ,text:selectamp==20?'':selectabc==1?'': selectabc==2?'':(table8+hellogname+table9+helloggazou+table10+conma.format(Math.floor(hellogansall))+worden+table11+selectrealmonth+table12+selectrealmonth+table13+conma.format(Math.floor(hellogans))+worden+table14+conma.format(Math.floor(hellogans-tohokuans))+worden+table15+wordhellog+table16+conma.format(Math.floor(hellogansall-tohokuansall))+worden+table17+helloganssa+table18+((tohokuansall - hellogansall) / tohokuansall * 100).toFixed(2)+wordp+table19)},// ◆◆◆ハロー
{val:nichiansall ,text:(table8+nichidenname+table9+nichidengazou+table10+conma.format(Math.floor(nichidenansall))+worden+table11+selectrealmonth+table12+selectrealmonth+table13+conma.format(Math.floor(nichidenans))+worden+table14+conma.format(Math.floor(nichidenans-tohokuans))+worden+table15+wordnichiden+table16+conma.format(Math.floor(nichidenansall-tohokuansall))+worden+table17+nichidenanssa+table18+((tohokuansall - nichidenansall) / tohokuansall * 100).toFixed(2)+wordp+table19)},// ◆◆◆ニチ
{val:kakuansall ,text:selectamp==20?'':selectabc==2?'':(table8+kakuyasuname+table9+kakuyasugazou+table10+conma.format(Math.floor(kakuyasuansall))+worden+table11+selectrealmonth+table12+selectrealmonth+table13+conma.format(Math.floor(kakuyasuans))+worden+table14+conma.format(Math.floor(kakuyasuans-tohokuans))+worden+table15+wordkakuyasu+table16+conma.format(Math.floor(kakuyasuansall-tohokuansall))+worden+table17+kakuyasuanssa+table18+((tohokuansall - kakuyasuansall) / tohokuansall * 100).toFixed(2)+wordp+table19)},// ◆◆◆格力
{val:pintansall ,text:selectabc==2?'':(table8+pintname+table9+pintgazou+table10+conma.format(Math.floor(pintansall))+worden+table11+selectrealmonth+table12+selectrealmonth+table13+conma.format(Math.floor(pintans))+worden+table14+conma.format(Math.floor(pintans-tohokuans))+worden+table15+wordpint+table16+conma.format(Math.floor(pintansall-tohokuansall))+worden+table17+pintanssa+table18+((tohokuansall - pintansall) / tohokuansall * 100).toFixed(2)+wordp+table19)},// ◆◆◆Pin
].filter(function(x){
return x.text.match(/\d/);
}).sort(function(x,y){
return x.val>y.val?1:-1;
}).map(function(x){
return x.text
}).join("\n");
}
</script>

[TreesShimi]

すいません、、endLoader()の１グループというと、どれが該当するのでしょうか？（汗）

[m.ts10806]

コメント欄はマークダウン使えないので、質問に追記してもらいたいですが、既に解決した後なのでちょっとした感じでなければ、もう少し試行錯誤してみて新しい質問たてられたほうがいいですね。

>endLoader()の１グループ

function endLoader(){
var loader = document.getElementById('loading');
loader.style.display = 'none';
}

[TreesShimi]

なんどもすいません、endLoader()理解しました。ちゃんと自分で考えてから質問しますね。申し訳ないです。

[m.ts10806]

いえいえ。私の書き方もちょっと雑でした。失礼しました。

[TreesShimi]

いえいえ、mts10806さんには細かく教えていただき、すごく感謝しています。ありがとうございます。

ただ、いろいろ試してみましたが、やはり以下のジャバスクリプトを記述すると、スマホでは計算結果が表示されなくなりますね。。。PCでは問題ないのですが。。

//////////////////
var loader = document.getElementById('loading');
loader.style.display = '';
setTimeout(endLoader,800);
////////////////

ちなみにこっち↓↓↓のスクリプトは記述しても問題ないです。

//////////////////////////
function endLoader(){
var loader = document.getElementById('loading');
loader.style.display = 'none';
}
/////////////////////////

すこし頭を冷やして、また明日改めて新しく質問をさせていただきます。
その際はまたお力添えいただけますと幸いです。

[m.ts10806]

ちなみにどこまで動作してますか？

[m.ts10806]

と思ったけど、改めるようですね。了解です。
かなり長いコードのようですが、別ファイルで最低限の内容で「ミニマムコード」を作って試して調整すると良いです。最低限の内容でできないことはできませんので。
あと最低限のコードで試すとどこに問題があるか見えてくることもあります。

新しく質問するときは「どこまで動作しているか」「確認した端末、ブラウザ」もつけると良いです。
環境依存がないとは限らないので。

[TreesShimi]

おはようございます！
アドバイスいただいたようにミニマムコードで試作したところ、スマホでも問題なく動作しました！
ただ、本チャンのコードで試すと動作しなくなるので、そちらのコードに問題があるようです。
それを探し出せれば解決できそうなので、今日はとりあえず自力で頑張ります。
mts10806さん、ありがとうございました！

[m.ts10806]

たぶん他のコードとかＣＳＳとかが壁になっていることはよくあります。
少しずつもとのコードに戻していって原因となっている箇所を突き止めるところからですね。
がんばってください。