WordPressの質問（q10217484）の続

質問

アップロードされたカメラ画像を非表示にするコードを追加したのですが、表示するためのURLを追加するコードが抜けており追加いたしました。
上記とは別にアップロードされたファイルをエンコードするコードも抜けているのではないかと思っております。
旧コードでは対象ファイルではない場合にアラートで警告ダイアログを表示するコードとは別にエンコードするコードがあるため最新コードにも追加すべきではないかと考えております…

下記のコードは追加すべきでしょうか？（single-input.php の15行目から38行目まで）

$attach = [];
if (!empty($_SESSION['attach'])) {
foreach ($_SESSION['attach']['data'] as $i => $data) {
if (!empty($data)) {
$base64 = base64_encode($data);
}
$type = $_SESSION['attach']['type'][$i];
switch ($type) {
case 'image/jpeg':
case 'image/png':
$attach[] = '<img style="height: 100px;" src="data:'.$type.';base64,'.$base64.'">';
break;
case 'video/mp4':
$attach[] = '<video style="height: 100px;" controls src="data:'.$type.';base64,'.$base64.'">';
break;
case 'application/pdf':
$attach[] = '<iframe style="height: 100px;" src="data:'.$type.';base64,'.$base64.'"></iframe>';
break;
default:
$attach[] = '';
break;
}
}
}

※最新コード
https://wandbox.org/permlink/my2wffcXlhMQZFvW

※旧コード
https://wandbox.org/permlink/cfzsJgBFcYrcIDI1

回答No.36

dell_OK · ベストアンサー

・参照している変数が存在しないと書かれているようなのです

そうですね。
コードを見ると、用意した変数は　divBoardFormPartial　ですが、
エラー個所では　divJsBoardFormPartial　と書かれています。
違いの「Js」はＩＤ名をそのまま書かれたからですね。
－－－－
// class
const divBoardFormPartial = document.createElement("div");
// classの追加
divBoardFormPartial.classList.add("board_form_partial");
// idの追加
divJsBoardFormPartial.id = 'js_board_form_partial_div';
－－－－

ＩＤを設定するにしても変数は変わりませんので「Js」のないものを書いてください。
－－－－
divBoardFormPartial.id = 'js_board_form_partial_div';
－－－－

変数名のつけ方についてクラスとかＩＤとかややこしい説明をしなかった方がよかったのかと、いまさらながらに思っています。

・1つの HTMLタグに複数のクラスを追加する方法について調べた際に答えが出てこず

そうですね。
次に発生するエラーはまさにそれです。
－－－－
divTitlePartialParts.classList.add("title-partial parts"); // classの追加
－－－－

classList.add()はクラスを追加する関数ですが、"title-partial parts"はクラスではありません。
"title-partial"と"parts"がクラスです。
なので、それぞれを追加するこんな書き方や、
－－－－
divTitlePartialParts.classList.add("title-partial"); // classの追加
divTitlePartialParts.classList.add("parts"); // classの追加
－－－－

複数同時に追加する書き方や、
－－－－
divTitlePartialParts.classList.add("title-partial", "parts"); // classの追加
－－－－

その関数は使わず、class属性を書きかえてしまうこんな書き方があります。
－－－－
divTitlePartialParts.className = "title-partial parts"; // classの追加
－－－－
divTitlePartialParts.setAttribute("class", "title-partial parts"); // classの追加
－－－－

追加や削除でクラスを頻繁に書きかえるのならclassListを使うのもいいと思いますが、要素を作りっぱなしでそのままのもに関してはclassNameでもいいのかなと思います。
https://developer.mozilla.org/ja/docs/Web/API/Element/classList
https://developer.mozilla.org/ja/docs/Web/API/Element/className

お礼

こちらが最新の質問になります。
回答の期限が切れていることに気が付かず、申し訳ありません。
アドバイス宜しくお願い致します。

https://okwave.jp/qa/q10235817.html

補足

Q.コードを見ると、用意した変数は　divBoardFormPartial　ですが、
エラー個所では　divJsBoardFormPartial　と書かれています。
違いの「Js」はＩＤ名をそのまま書かれたからですね。
ＩＤを設定するにしても変数は変わりませんので「Js」のないものを書いてください。

A.回答ありがとうございます、変数をそろえるんですね理解できました。

Q.classList.add()はクラスを追加する関数ですが、"title-partial parts"はクラスではありません。
"title-partial"と"parts"がクラスです。
追加や削除でクラスを頻繁に書きかえるのならclassListを使うのもいいと思いますが、要素を作りっぱなしでそのままのもに関してはclassNameでもいいのかなと思います。

➀なので、それぞれを追加するこんな書き方や、
－－－－
divTitlePartialParts.classList.add("title-partial"); // classの追加
divTitlePartialParts.classList.add("parts"); // classの追加
－－－－

➁複数同時に追加する書き方や、
－－－－
divTitlePartialParts.classList.add("title-partial", "parts"); // classの追加
－－－－

➂その関数は使わず、class属性を書きかえてしまうこんな書き方があります。
－－－－
divTitlePartialParts.className = "title-partial parts"; // classの追加
－－－－
divTitlePartialParts.setAttribute("class", "title-partial parts"); // classの追加
－－－－

A.解説ありがとうございます。➀➁は恐らくクラスを2つ分けることになり下記のように書くことができないと思われる為、
➂の方法で書きたいのですが頻繁に書き換える場合 classList を使ったほうが良いとのことでどちらを選択すべきでしょうか？

・title-partial {

}

回答No.25

dell_OK

・sample.php の要素の関係性を見ると親はＡかＢどちらになるのでしょうか？

ＨＴＭＬのタグの外側のものが親です。
なのでＡとＢの関係ではＡが親です。
「sample.php の要素の関係性」と言われていますが、それに該当するのは、私が訂正する前のものですが、この部分ですよね。
－－－－
// class
const board_form_partial_div = document.createElement("div");
// classの追加
board_form_partial_div.classList.add("board_form_partial");
// id
const js_board_form_partial_div = document.createElement('div');
// idの追加
js_board_form_partial_div.id = 'js_board_form_partial_div';
－－－－
これはＢを生成していますが、生成したものをＡに追加する処理が書かれていません。
変数名を変更しようとした作業と、このＢにあたる階層をさらに追加した作業を一緒にされたようなので、どこでＢの追加をしたらいいのかもわからなくなっているのではないでしょうか。

・非同期通信に入れない方法もあるのではないかと考えていたのですが、Javascript で別途生成する方法もあるという認識で合ってますでしょうか？

そうですね。
実際のコードがわからないので確実にとは言えませんが、JavaScriptでHTMLを書きかえる実装は可能なのでできると思っています。
参考サイトを見る限り、クラスを変更することでスタイルシートの影響を受けて見た目が変化するものかと思います。
クラスを追加削除する方法はご存じのはずなので実装できそうですね。

補足

Q.これはＢを生成していますが、生成したものをＡに追加する処理が書かれていません。
変数名を変更しようとした作業と、このＢにあたる階層をさらに追加した作業を一緒にされたようなので、どこでＢの追加をしたらいいのかもわからなくなっているのではないでしょうか。

A.回答ありがとうございます、質問の説明が不足しておりました申し訳ありません。
sample.phpの382行目と396行目のコードについて親はBになるのではないでしょうか？
追加する処理が抜けておりましたご指摘ありがとうございます。最も外側の HTML タグになるので一番最後に追加致します。

Ａ<div id="confirm_area" style="display: block;">
Ｂ <div class="board_form_partial" id="js_board_form_partial">

※該当コード
https://wandbox.org/permlink/AKB7fAcT53FvYUXs

Q.参考サイトを見る限り、クラスを変更することでスタイルシートの影響を受けて見た目が変化するものかと思います。
クラスを追加削除する方法はご存じのはずなので実装できそうですね。

A.回答ありがとうございます、右上に表示する画像の URL のみ変更する形になると思われます。

回答No.24

dell_OK

最新のコードを見てみましたがまったく動かなくなっています。
必ずローカルの個別ファイルでスクリプトを試してから実装してください。
動くかどうかを確認するのは私がすることではありません。
質問者さまが事前に確認しておいて欲しいです。
作り方がわからない、エラーを解決できない、と言った内容で質問してください。

エラーが出ている個所はここです。
－－－－３２１行目
const questionHeader-partial_div = document.createElement("div");
－－－－
変数名に - は使えません。

それを直すと次のエラーはここです。
－－－－３２５行目
const title-partial parts_div = document.createElement("div");
－－－－
変数名に空白も使えません。

私がクラス名にならったと言ったのでそのままクラス名を変数にされたのだと思いますが、多くのプログラム言語で - や空白は変数名に使えません。
基本的なことですが - は引き算の演算子です。
一般的には「title-partial」と書くと、「title　引く　partial」と言う式だと解釈しようとします。
「title - partial」と同じことです。
なので - は変数名には使えません。

空白は予約語と変数の区切り文字です。
「consttitle」と書くと解釈されないので、「const title」と書く規則のようなものです。
他の空白はあってもなくても解釈に影響されないものです。
「title-partial parts_div」は「title-partial」と「parts_div」の別々の単語（予約語や変数）だと解釈しようとします。
ここでは - もあるので「title」と「partial」と「parts_div」ですね。

ただ、エラーメッセージはそのようなことは示してはくれません。
おかしなところで即座に止まるので、私が説明にしたような推測をふまえた無理やりな解釈はしません。
「Uncaught SyntaxError: Missing initializer in const declaration」
『キャッチされない SyntaxError: const 宣言に初期化子がありません』
初期化子と言うのは、この場合 = です。
「= が見つからなかった」と言うエラーです。
構文は「const 名前 = 値」です。
JavaScriptは以下のような処理をしていると思われます。
１．「const」があった、定数の宣言だ。
２．「const」の次は定数名があるはずだ。
　その定数名は「title」だ。（-で途切れる）
３．定数名の次は初期化子「=」があるはずだ。
　あれ？「-」だよ、「=」じゃないからエラーにしよう。

無駄話のように説明しましたが、コンピューターがこのような解釈でやっているんだな、と言うことを常に頭の中に入れておいてください。
そうすればコーディングの簡単な間違いは自分でわかってくるようになると思います。

クラス名にならう、について説明を省いたためにこうもなったのかと思っています。
親子が分かりやすいと思ってそうしたのですが、本来はクラス名を変数にしない方がいいです。
なぜなら、クラスは複数のタグに同じものが設定できるからです。

例えばこのようなクラスを記述している個所があります。
"namae-partial parts"
"body-partial parts"

クラスの特殊性は空白で区切ることで複数していできることです。
ここでは３つのクラスがあります。
　namae-partial
　body-partial
　parts

これで言うと、変数としてならって欲しかったクラス名は　namae-partial　や　body-partial　でした。
parts　はこれらとは少し違う用途のためにあるクラス名でしたね。
変数名としては「namae_partial_div」や「body_partial_div」かな。
それはそれとして。

もしかしたら、名前も質問文も同じクラス名　partial　で作っていたかも知れない場合もありえます。
そうなると　partial　はどの　partial　なのか分かりにくくなってしまいます。

ここまで言っておいて言うのもよくないかも知れませんが、もちろん変数名を　partial　にしても、それ自体には問題ありません。
もともと div や child でやっていたのですから、正しく使いまわせばなんの問題もありません。

分かりやすくするためにクラス名にならっただけです。
ですがそれもよくないと言ったのは、場合によっては分かりづらくなるからです。
親も子も同じクラス名だった場合などがあったりしますから。

もし確実にただひとつのものだけを示すとしたらＩＤにならう方がいいと思います。
ですが、使うかどうかわからないまだ未設定のＩＤにならうことはできません。
ここではただ表示するためだけのＨＴＭＬを生成するためだけの処理なので、ＩＤを使いまくるはずもなく設定もしないでしょう。
今わかっているのはクラス名だけだったからクラス名にならったまでです。
場合によって何にならうかは変わってくると思いますので、絶対これだ、と言う風には思わないでくださいね。

補足

Q.必ずローカルの個別ファイルでスクリプトを試してから実装してください。
動くかどうかを確認するのは私がすることではありません。
質問者さまが事前に確認しておいて欲しいです。
作り方がわからない、エラーを解決できない、と言った内容で質問してください。

A.回答ありがとうございます、申し訳ありませんコードが間違っている前提でお聞きしておりました。

Q.私がクラス名にならったと言ったのでそのままクラス名を変数にされたのだと思いますが、多くのプログラム言語で - や空白は変数名に使えません。

A.回答ありがとうございます。覚えておきます、勉強になりました。
JSの変数やメソッドでは、camelCase で命名するのが慣例とのことで、以下のアドバイスを頂き案1でコードを全て修正してみました。
案2. 変数名ではなくプロパティ名として書く方法は難しそうで、プロパティ名は class ごとに分けるべきか、HTMLタグごとのみ分けるだけで良いのか分からず sample.js に一部だけ書いてみました。

※最新コード
https://wandbox.org/permlink/ncJsnAA8BEgkpAx5

※頂いたアドバイス
案1. ローカル変数名をキャメルケースで書く
例)
var divTitlePartialParts = 要素;
divTitlePartialParts.append(子要素);
親要素.append(divTitlePartialParts);

案2. 変数名ではなくプロパティ名として書く
例)
var div = {};
div["title-partial parts"] = 要素;
div["title-partial parts"].append(子要素);
親要素.append(div["title-partial parts"]);

Q.JavaScriptは以下のような処理をしていると思われます。
１．「const」があった、定数の宣言だ。
２．「const」の次は定数名があるはずだ。
　その定数名は「title」だ。（-で途切れる）
３．定数名の次は初期化子「=」があるはずだ。
　あれ？「-」だよ、「=」じゃないからエラーにしよう。

A.解説ありがとうございます。エラーについて頭に入れておくようにします。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

常に表示されている step_area についてコードを考えてみたのですが、間違えている部分はありますでしょうか？
変数名をどうすべきか悩んで親、子、孫、ひ孫、やしゃごで命名してみました。コードを考えながら書いてみたところかなり大変だと感じております…

※該当HTML
<div class="questionHeader-partial">
<h2><span class="fa-stack"><i class="fa fa-circle fa-stack-2x w-circle"></i>
<i class="fa-stack-1x fa-inverse q">Q</i></span>
<span class="q-text">質問する</span></h2>
<div class="other_step">
<img src="http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/step02.png" width="364" height="36" alt="STEP1 入力">
</div>
</div>

※Javascripコード
<script>
const divQuestionHeaderPartial = document.createElement("div"); // div (親)を生成
divQuestionHeaderPartial.classList.add("questionHeader-partial"); // classの追加
child = document.createElement("h2"); // h2 (子)を生成
grandchild = document.createElement("span"); // span (孫)を生成
grandchild.class = "fa-stack"; // classの追加
greatGrandchildOldest = document.createElement("i"); // i (ひ孫一番目)を生成
greatGrandchildOldest.class = "fa fa-circle fa-stack-2x w-circle"; // classの追加
greatGrandchildSecondOldest = document.createElement("i"); // i (ひ孫二番目)を生成
greatGrandchildSecondOldest.class = "fa-stack-1x fa-inverse q"; // classの追加
greatGreatGrandchild.appendChild(document.createTextNode('Q')); //やしゃご要素として Text ノードを生成

grandchildSecond = document.createElement("span"); // span (孫二番目)を生成
childSecond = document.createElement("div"); // div (子)を生成
childSecond.class = "other_step"; // classの追加

grandchildThird = document.createElement("img"); // img (孫三番目)を生成
//属性の追加
grandchildThird.src = "http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/step02.png";
grandchildThird.style.Height = "364px";
grandchildThird.style.Width = "36px";
grandchildThird.alt = "STEP1 入力"

/*<h2><span class="fa-stack"><i class="fa fa-circle fa-stack-2x w-circle"></i>
<i class="fa-stack-1x fa-inverse q">Q</i></span><span class="q-text">質問する</span></h2>まで*/
grandchild.appendChild(i); // grandchild (孫要素) の末尾に i を追加
h2.appendChild(grandchild); // h2 (子要素) の末尾に grandchild を追加
divQuestionHeaderPartial.appendChild(h2); // divQuestionHeaderPartial (親要素) の末尾に h2 を追加

/*<div class="other_step">
<img src="http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/step02.png" width="364" height="36" alt="STEP1 入力">
</div>まで*/
div.appendChild(grandchildThird); // div (子要素) の末尾に grandchildThird を追加
divQuestionHeaderPartial.appendChild(div); // divQuestionHeaderPartial (親要素) の末尾に div を追加
</script>

回答No.23

dell_OK

・confirm_area.appendChild(child); と div.appendChild(child); の違いも曖昧なのですが、 div.appendChild(child); は createElement() でHTML 要素を動的に生成する前のタグが div の時に使われるという認識で合ってますでしょうか？

回答No.22を読んでいただければわかってくると思います。
すべてが単純な「親要素.appendChild(子要素)」です。
ですが、親要素がなんなのか、子要素がなんなのか、を理解する必要があります。
いきなりコードから始めたので理解が難しくなっていると思いますが、ＨＴＭＬから始めていたら難しさは軽減されていたと思います。

confirm_area.appendChild(child)
親要素はconfirm_area、子要素はchild、childはcreateElement()で作られた何かしらのタグ。

div.appendChild(child)
親要素はdiv、子要素はchild、childはcreateElement()で作られた何かしらのタグ。

言葉にすると違うのは親要素だけです。
子要素は、何かしらのタグ、なのでその内容はそれぞれで違う何かしら。
でも、やっていることは「親要素に子要素を追加」ただそれだけ。
なので、親要素がなんなのか、子要素がなんなのか、を理解すればいいのです。

コードから解釈せずに、ＨＴＭＬから解釈すれば、もっとわかりやすいはずです。
そのためにもＨＴＭＬを書いてもらいました。

－－－－
Ａ<div id="confirm_area" style="display: block;">
Ｂ <div class="board_form_partial" id="js_board_form_partial">
Ｃ <div class="questionHeader-partial">
Ｄ <div class="title-partial parts"> <!-- title-partial + parts -->
　 質問タイトルテスト
　 </div>
Ｅ <div class="stamp-partial">
－－－－

ＡとＢは親子、Ａが親、Ｂが子。
ＢとＣは親子、Ｂが親、Ｃが子。
ＣとＤは親子、Ｃが親、Ｄが子。
ＣとＥは親子、Ｃが親、Ｅが子。
ＤとＥは兄弟、Ｃが親。
親子とは階層でもあります。
前回、孫の話しまでしましたが、親子（階層が違う）、兄弟（階層が同じ）の関係を把握して、要素を追加していくようにすれば簡単になってくると思います。
上記の例で言うと、ＡＢＣを変数にして、elementA、elementB、elementCとかでもいいかも知れません。

・sample.phpを修正してみたのですが、382行目と396行目が何故 confirm_area.appendChild(child); になるのか分からず悩んでおります…

質問の意味がわかりません。
　382 confirm_area.appendChild(image_partial_div); // confirm_area の末尾に div を追加
　396 div.appendChild(child); // div の末尾に child を追加
最新コードの396行目は div. のようですが、これを confirm_area. にしなければならないのか分からないと言うことでしょうか。
同じ説明を繰り返すことになるのでしませんが、ここまでの説明でだいぶわかってきているのではないでしょうか。

・非同期通信でFont Awesomeアイコンを使う事は難しいでしょうか？　

Font Awesomeがどのようなものは把握していませんが、難しいことではないと思います。
基本的なことはＨＴＭＬを生成するだけだと思います。
画像にする場合も同じくＨＴＭＬを生成するだけです。
どのようなＨＴＭＬを生成するかが違うだけで、どこで何をするかは同じだと思います。

ただ、「回答No.19の補足に書かせていただいた HTML に間違いがありました」で追加されたコードですが、これをその中に入れるのがいいかどうかを先に検討してみてください。

見た目で言うとですが、こうなっていきますよね。
～～～～
質問する　　　　　　　　　　　「ＳＴＥＰ１入力」　＞　ＳＴＥＰ２確認　＞　ＳＴＥＰ３完了
動画・画像をアップロード
名前
～～～～
確認する　　　　　　　　　　　ＳＴＥＰ１入力　＞　「ＳＴＥＰ２確認」　＞　ＳＴＥＰ３完了
動画・画像
名前
～～～～
完了　　　　　　　　　　　　　ＳＴＥＰ１入力　＞　ＳＴＥＰ２確認　＞　「ＳＴＥＰ３完了」
動画・画像
名前
～～～～

これをＨＴＭＬで書いてみると、こんなのをイメージされていますよね。
－－－－
<div id="input_area">
<h2>質問する</h2><div>｛ＳＴＥＰの表示｝</div>
<div>動画・画像を～</div>
<div>名前</div>
</div>
<div id="confirm_area"></div>
<div id="result_area"></div>
－－－－
<div id="input_area"></div>
<div id="confirm_area">
<h2>確認する</h2><div>｛ＳＴＥＰの表示｝</div>
<div>動画・画像</div>
<div>名前</div>
</div>
<div id="result_area"></div>
－－－－
<div id="input_area"></div>
<div id="confirm_area"></div>
<div id="result_area">
<h2>完了</h2><div>｛ＳＴＥＰの表示｝</div>
<div>動画・画像</div>
<div>名前</div>
</div>
－－－－

でもですよ、見た目はまったく同じですが、こんな風にもできます。
－－－－
<div id="step_area">
<h2>質問する</h2><div>｛ＳＴＥＰの表示｝</div>
</div>
<div id="input_area">
<div>動画・画像を～</div>
<div>名前</div>
</div>
<div id="confirm_area"></div>
<div id="result_area"></div>
－－－－
<div id="step_area">
<h2>確認する</h2><div>｛ＳＴＥＰの表示｝</div>
</div>
<div id="input_area"></div>
<div id="confirm_area">
<div>動画・画像</div>
<div>名前</div>
</div>
<div id="result_area"></div>
－－－－
<div id="step_area">
<h2>完了</h2><div>｛ＳＴＥＰの表示｝</div>
</div>
<div id="input_area"></div>
<div id="confirm_area"></div>
<div id="result_area">
<div>動画・画像</div>
<div>名前</div>
</div>
－－－－

input_area、confirm_area、result_areaは表示非表示を切り替えていますが、step_areaは常に表示されている部分です。
その内容を変更するだけですので、createElement()などで生成や追加するよりも簡単になってきます。
変更するためにＩＤを付けるとこんな感じです。
－－－－
<div id="step_area">
<h2 id="step_title"></h2><div id="step_img"></div>
</div>
－－－－

スクリプトはこんな処理内容です。
　document.getElementById("step_title").textContent = "確認する";
　document.getElementById("step_img").～ = ～;
Font Awesomeでも画像でも、～の部分をどうにかすることで実現できると思います。

実際はこんなに簡単な階層ではないかも知れませんが、正しいＨＴＭＬとなるよう要素タグを設定して、それぞれに必要な処理をすればいいと思います。

補足

Q.confirm_area.appendChild(child)
親要素はconfirm_area、子要素はchild、childはcreateElement()で作られた何かしらのタグ。

div.appendChild(child)
親要素はdiv、子要素はchild、childはcreateElement()で作られた何かしらのタグ。

A.回答ありがとうございます。覚えておきます。

－－－－
Ａ<div id="confirm_area" style="display: block;">
Ｂ <div class="board_form_partial" id="js_board_form_partial">
Ｃ <div class="questionHeader-partial">
Ｄ <div class="title-partial parts"> <!-- title-partial + parts -->
　 質問タイトルテスト
　 </div>
Ｅ <div class="stamp-partial">
－－－－

ＡとＢは親子、Ａが親、Ｂが子。
ＢとＣは親子、Ｂが親、Ｃが子。
ＣとＤは親子、Ｃが親、Ｄが子。
ＣとＥは親子、Ｃが親、Ｅが子。
ＤとＥは兄弟、Ｃが親。

A.解説ありがとうございます。とても分かりやすく理解することが出来ました。

Q.sample.phpを修正してみたのですが、382行目と396行目が何故 confirm_area.appendChild(child); になるのか分からず悩んでおります…

A.回答ありがとうございます。説明を頂いて理解出来てきたのですが、sample.php の要素の関係性を見ると親はＡかＢどちらになるのでしょうか？Ｂの board_form_partial になるのではないかと考えております。

Ａ<div id="confirm_area" style="display: block;">
Ｂ <div class="board_form_partial" id="js_board_form_partial">

Q.Font Awesomeがどのようなものは把握していませんが、難しいことではないと思います。
基本的なことはＨＴＭＬを生成するだけだと思います。
画像にする場合も同じくＨＴＭＬを生成するだけです。

ただ、「回答No.19の補足に書かせていただいた HTML に間違いがありました」で追加されたコードですが、これをその中に入れるのがいいかどうかを先に検討してみてください。

スクリプトはこんな処理内容です。
　document.getElementById("step_title").textContent = "確認する";
　document.getElementById("step_img").～ = ～;
Font Awesomeでも画像でも、～の部分をどうにかすることで実現できると思います。

A.アドバイスありがとうございます。Font Awesome は HTML でアイコンフォントを呼び出すものになります。
非同期通信に入れない方法もあるのではないかと考えていたのですが、Javascript で別途生成する方法もあるという認識で合ってますでしょうか？

※参考サイト
https://homeatlast.co.jp/font-awesome.html

回答No.22

dell_OK

・質問➀についてコードを書いてみたのですが、classとidを同じ div で表示させたい場合 createElement は1つになると思うのですがどうすれば良いのでしょうか？

－－－－
// class
const board_form_partial_div = document.createElement("div");
// classの追加
board_form_partial_div.classList.add("board_form_partial");
// idの追加
board_form_partial_div.id = 'js_board_form_partial_div';
－－－－

・質問➁
createElement() で HTML 要素を動的に生成して、appendChild() で追加する場所を指定、appendChild(child) で子要素として追加という役割で合ってますでしょうか？

そうですね。
基本的には以下のような処理です。
　子要素 = document.createElement("要素名") // 要素を生成
　親要素.appendChild(子要素) // 要素を追加

・pタグが必要ない場合削除してもよいのでしょうか…？

かまいませんが順番がおかしくならないようにしてください。
不安でしたらcreateElement()とappendChild()の練習をして使い方を自分のものにしてください。
例えば、以下のようにしたらどうなるとか。
　子要素 = document.createElement("要素名")
　孫要素 = document.createElement("要素名")
　子要素.appendChild(孫要素)
　親要素.appendChild(子要素)
　兄弟要素 = document.createElement("要素名")
　親要素.appendChild(兄弟要素)
子要素は親要素の中に、孫要素は子要素の中（階層が一段深くなる）に、兄弟要素は親要素の中でかつ子要素の次（同じ階層）に、みたいな解釈ができるようになればいいと思います。

手で作ったＨＴＭＬとスクリプトで生成したＨＴＭＬが同じになるようローカルで試してみてください。
私とてそれなりに理解していても何十回とそのように繰り返しています。

・confirm_area.appendChild(child); // confirm_area の末尾に child を追加　についてのコードの意図が分からないのですが、pタグを追加する場合に必要なのでしょうか？

そのようなコードはないと思いますので、どこのことかわかりません。
pタグのところの話しでしたらそうでしょうね。

話しは少しそれますが、これらのことについての考え方を説明しておきます。
あくまで、私が思うに、なので本当のところは少し違うかも知れません。

質問者さまのひとつ前から抜粋です。
－－－－Ａ
div = document.createElement("div");
child = document.createElement("p");
child.appendChild(document.createTextNode(namae_value));
div.appendChild(child); // div の末尾に child を追加
confirm_area.appendChild(div); // confirm_area の末尾に div を追加
－－－－

pタグに関するものがなくなると、これだけになります。
－－－－Ｂ
div = document.createElement("div");
confirm_area.appendChild(div); // confirm_area の末尾に div を追加
－－－－

でも、name_valueを表示したいのでその処理が必要です。
どこに表示するのかと言うと div の中でしょうからこうなります。
－－－－Ｃ
div = document.createElement("div");
div.appendChild(document.createTextNode(namae_value));
confirm_area.appendChild(div); // confirm_area の末尾に div を追加
－－－－
ＡとＣでは親要素が違います。
Ａ　child.appendChild()
Ｃ　div.appendChild()

Ａの真ん中の行を見てみましょう。
－－－－
child.appendChild(document.createTextNode(namae_value));
－－－－

これは生成した要素を変数に入れずに、直接追加しています。
divから見ると孫要素です。
～～～～
<div>
<p>
namae_valueの値
</p>
</div>
～～～～
実際はテキストノードなので要素と呼ぶのは正しくはないかも知れませんが、親子孫の関係ためこの言葉で説明しておきます。

それで、pタグをなくしたい、ＨＴＭＬは以下のようなものだとします。
～～～～
<div>
namae_valueの値
</div>
～～～～

そうなると、Ｃの真ん中の行のように、親要素変数divにテキストノードを追加することになります。
－－－－
div.appendChild(document.createTextNode(namae_value));
－－－－

テキストノードを変数にしていない理由について。
もともとの参照サイトでそうなっていたのだと思いますが、おそらく、テキストノードにはその中にさらに要素などを追加することができない最小単位のものだからだと思います。
変数にする意味はそれを何度か使うことが主な役割なので、二度と使わないものは変数に入れる必要がありません。

例えばdivタグの中にdivタグを追加する場合はこれだけですみます。
－－－－
div.appendChild(document.createElement("div"));
－－－－
～～～～
<div>
<div></div>
</div>
～～～～

でもこれだけ作ってもあまり意味はないですよね。
内側のdivタグの中には何かしらが入っていて欲しいものです。
－－－－
child = document.createElement("div");
child.classList.add("classA");
child.id = "namae";
child.appendChild(document.createTextNode("なまえ"));
div.appendChild(child);
－－－－
～～～～
<div>
<div class="classA" id="namae">
なまえ
</div>
</div>
～～～～
こんな風に、要素に属性を追加したり、さらに要素を追加したりするには、変数childに対して複数の処理が必要になってくるわけです。
一方、テキストノードはただの文字（タグを含まない）で、その中に何も入れれず、二度と使わないので、直接追加しています。

もちろん変数に入れることもできます。
－－－－
child = document.createElement("div");
child.classList.add("classA");
child.id = "namae";
textnode = document.createTextNode("なまえ");
child.appendChild(textnode);
div.appendChild(child);
－－－－
これだけだと何の意味もありませんが、このように分解すると、１行が短くなって、どこになにを追加しているかがわかりやすくもなりますし、コーディングのルールも統一されます。
ただ、テキストノードは直接追加すると言うコーディングルールもありとは思います。

補足

Q.質問➀についてコードを書いてみたのですが、classとidを同じ div で表示させたい場合 createElement は1つになると思うのですがどうすれば良いのでしょうか？

A.回答ありがとうございます、勉強になりました。覚えておきます。

Q.質問➁
基本的には以下のような処理です。
　子要素 = document.createElement("要素名") // 要素を生成
　親要素.appendChild(子要素) // 要素を追加

A.解説ありがとうございます。理解できました。

Q.pタグが必要ない場合削除してもよいのでしょうか…？

A.回答ありがとうございます、pタグは残しておいた方が分かりやすいのではないかと思いました。

Q.話しは少しそれますが、これらのことについての考え方を説明しておきます。
あくまで、私が思うに、なので本当のところは少し違うかも知れません。

A.解説ありがとうございます。コメントアウトでまとめてみました。

pタグあり
－－－－Ａ
div = document.createElement("div"); // div (子)を生成
child = document.createElement("p"); // p (孫)を生成
child.appendChild(document.createTextNode(namae_value)); //孫要素として Text ノードを生成
div.appendChild(child); // div の末尾に child (孫要素) を追加
confirm_area.appendChild(div); // confirm_area (親要素) の末尾に div を追加
－－－－

pタグなし name_valueなし
－－－－Ｂ
div = document.createElement("div"); // div (子)を生成
confirm_area.appendChild(div); // confirm_area (親要素) の末尾に div を追加
－－－－

pタグなし name_valueあり
－－－－Ｃ
div = document.createElement("div"); // div (子)を生成
div.appendChild(document.createTextNode(namae_value)); //子要素として Text ノードを生成
confirm_area.appendChild(div); // confirm_area (親要素) の末尾に div を追加
－－－－
ＡとＣでは親要素が違います。
Ａ　child.appendChild()
Ｃ　div.appendChild()

Q.おそらく、テキストノードにはその中にさらに要素などを追加することができない最小単位のものだからだと思います。
変数にする意味はそれを何度か使うことが主な役割なので、二度と使わないものは変数に入れる必要がありません。
分解すると、１行が短くなって、どこになにを追加しているかがわかりやすくもなりますし、コーディングのルールも統一されます。
ただ、テキストノードは直接追加すると言うコーディングルールもありとは思います。

A.回答ありがとうございます、二度と使わないものであれば変数にする必要はないからという理由でしっくりきました。
分解したほうがコードのミスは減り、後に見返した時に分かりやすいですね。

－－－－ A
child = document.createElement("div"); // div (孫)を生成
child.classList.add("classA"); // classの追加
child.id = "namae"; // idの追加
child.appendChild(document.createTextNode("なまえ")); //孫要素として Text ノードを生成
div.appendChild(child); // div (子要素) の末尾に child を追加
－－－－

変数に入れる場合
－－－－ B
child = document.createElement("div"); // div (孫)を生成
child.classList.add("classA"); // classの追加
child.id = "namae"; // idの追加
textnode = document.createTextNode("なまえ"); //孫要素として Text ノードを生成
child.appendChild(textnode); // child (子要素) の末尾に textnode を追加
div.appendChild(child); // div (親要素) の末尾に child を追加
－－－－

回答No.21

dell_OK

質問➀
両方実装可能です。
質問の意図がわかりませんが、もともとそのように書かれていますよね。

質問➁
記載されたコードの１行目と２行目は画像表示の箇所ではありません。
３行目からが画像表示の処理です。
－－－－
div.appendChild(child); // div の末尾に child を追加
confirm_area.appendChild(div); // confirm_area の末尾に div を追加
div = document.createElement("div");
－－－－

私のサンプルコードの作り方がかなりよくなかったようです。
質問➂のこととあわせて、画像表示の処理を書き直してみます。

汎用的な変数 div は使わないで、階層タグごとに個別の変数を作るようにしたので、どの要素がどの要素に追加されているかがわかりやすくなったと思います。
－－－－変更前
div = document.createElement("div");
for (const i in blobType) {
if (blobType[i] != "") {
child = null;
if (blobType[i] == "img") {
child = document.createElement("img");
} else if (blobType[i] == "video") {
child = document.createElement("video");
child.setAttribute("controls", null);
} else if (blobType[i] == "iframe") {
child = document.createElement("iframe");
}
if (child !== null) {
child.style.maxHeight = "200px";
child.style.maxWidth = "200px";
child.src = blobUrl[i];
div.appendChild(child);
}
}
}
confirm_area.appendChild(div); // confirm_area の末尾に div を追加
－－－－変更後
const image_partial_div = document.createElement("div");
image_partial_div.classList.add("image-partial");
for (const i in blobType) {
if (blobType[i] != "") {
var changeImg = null;
if (blobType[i] == "img") {
changeImg = document.createElement("img");
} else if (blobType[i] == "video") {
changeImg = document.createElement("video");
changeImg.setAttribute("controls", null);
} else if (blobType[i] == "iframe") {
changeImg = document.createElement("iframe");
}
if (changeImg !== null) {
changeImg.classList.add("changeImg");
changeImg.style.maxHeight = "200px";
changeImg.style.maxWidth = "200px";
changeImg.src = blobUrl[i];
const image_camera_icon_div = document.createElement("div");
image_camera_icon_div.classList.add("image-camera-icon");
image_camera_icon_div.appendChild(changeImg);
image_partial_div.appendChild(image_camera_icon_div);
}
}
}
confirm_area.appendChild(image_partial_div); // confirm_area の末尾に div を追加
－－－－

質問➃
参考サイトに書かれているとおりです。
　elm.classList.add("className");
つまり、
　要素.classList.add("クラス");

他のところも汎用的な変数 div を使わないで、個別の変数で要素を作った方がわかりやすくなっていいかも知れません。

お礼

こちらが最新の質問になります。
confirm_area.appendChild(child); と div.appendChild(child); の違いも曖昧なのですが、 div.appendChild(child); は createElement() でHTML 要素を動的に生成する前のタグが div の時に使われるという認識で合ってますでしょうか？

sample.phpを修正してみたのですが、382行目と396行目が何故 confirm_area.appendChild(child); になるのか分からず悩んでおります…

回答No.19の補足に書かせていただいた HTML に間違いがありました申し訳ありません。下記コードでステップフロー画像も確認画面で表示させたいのですが、非同期通信でFont Awesomeアイコンを使う事は難しいでしょうか？　画像にするべきか dell_ok さんにお聞きしたいです。

<div class="board_form_partial" id="js_board_form_partial">
<div class="questionHeader-partial">
<h2><span class="fa-stack"><i class="fa fa-circle fa-stack-2x w-circle"></i><i class="fa-stack-1x fa-inverse q">Q</i></span><span class="q-text">質問する</span></h2>
<div class="other_step">
<img src="http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/step02.png" width="364" height="36" alt="STEP1 入力">
</div>
</div>

※表示したいHTML
<div id="confirm_area" style="display: block;">
<div class="board_form_partial" id="js_board_form_partial">
<div class="questionHeader-partial">
<h2><span class="fa-stack"><i class="fa fa-circle fa-stack-2x w-circle"></i><i class="fa-stack-1x fa-inverse q">Q</i></span><span class="q-text">質問する</span></h2>
<div class="other_step">
<img src="http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/step02.png" width="364" height="36" alt="STEP1 入力">
</div>
</div>
<div class="title-partial parts"> <!-- title-partial + parts -->
質問タイトルテスト
</div>

<div class="stamp-partial">
<input type="radio" name="stamp" id="confirm_stamp" value="1"><label for="confirm_stamp"></label>
</div>

<div class="namae-partial parts"> <!-- title-partial + parts -->
名前テスト
</div>

<div class="body-partial parts"><!-- body-partial + parts -->
コメントテスト
</div>

<div class="image-partial">

<div class="image-camera-icon">
<img src="http://www.irasuto.cfbx.jp/wp-content/uploads/camera.png" class="changeImg" style="height: 100px;">
</div>

<div class="image-camera-icon">
<img src="http://www.irasuto.cfbx.jp/wp-content/uploads/camera.png" class="changeImg" style="height: 100px;">
</div>

<div class="image-camera-icon">
<img src="http://www.irasuto.cfbx.jp/wp-content/uploads/camera.png" class="changeImg" style="height: 100px;">
</div>
</div>

<div class="post-button"><!-- ボタンを押せなくする -->
<button type="button">入力画面へ戻る</button><button type="button" name="output">結果画面へ進む</button>
</div>
</div>
</div>
<!-- type、name、id、valueの順番 -->
</div>
</div>

※最新コード
https://wandbox.org/permlink/5BfE7DyUtwCNWL2y

補足

解説ありがとうございます。

質問➀についてコードを書いてみたのですが、classとidを同じ div で表示させたい場合 createElement は1つになると思うのですがどうすれば良いのでしょうか？

// class
const board_form_partial_div = document.createElement("div");
// classの追加
board_form_partial_div.classList.add("board_form_partial");
// id
const js_board_form_partial_div = document.createElement('div');
// idの追加
js_board_form_partial_div.id = 'js_board_form_partial_div';

質問➁
createElement() で HTML 要素を動的に生成して、appendChild() で追加する場所を指定、appendChild(child) で子要素として追加という役割で合ってますでしょうか？

質問③④についての修正ありがとうございます。コードを参考に階層タグごとに個別の変数にしてみました。

上記と別に質問があるのですが、child = document.createElement("p"); は必須でしょうか？以前こちらのコードを消した際に順番がおかしくなった気がするのですが、pタグが必要ない場合削除してもよいのでしょうか…？

confirm_area.appendChild(child); // confirm_area の末尾に child を追加　についてのコードの意図が分からないのですが、pタグを追加する場合に必要なのでしょうか？

回答No.20

dell_OK

最新コードを試して気づいたことを先に。

固定文字が表示されていました。
－－－－
child.appendChild(document.createTextNode('title_value'));
～
child.appendChild(document.createTextNode('namae_value'));
～
child.appendChild(document.createTextNode('question_value'));
－－－－

変数にしておいてください。
－－－－
child.appendChild(document.createTextNode(title_value));
～
child.appendChild(document.createTextNode(namae_value));
～
child.appendChild(document.createTextNode(question_value));
－－－－

いただいた質問については、のちほど回答させていただきます。

補足

回答ありがとうございます、修正いたしました。

回答No.19

dell_OK

・移動させるだけで良いのでしょうか？

よくありません。
移動先がわずかにおかしいです。
まずはそうなるＨＴＭＬを書いてみてください。
それから、それを生成するcreateElementやappendChildを組み合わせてみてください。
ＨＴＭＬと生成コードはいきなり実装しないでください。
まずはローカルのデスクトップなどにhtmlファイルを用意して、
十分に試してみて成功したら実装してください。

ファイル名はinput.htmlとして以下のコードにしてください。
－－－－
<div id="confirm_area"></div>
<script>
const confirm_area = document.getElementById("confirm_area");
var namae_value = "なまえ";
var title_value = "たいとる";
var question_value = "しつもんぶん";
var stamp_value = "1";
confirm_area.textContent = '';
var div;
var child;
child = document.createElement("h2");
child.appendChild(document.createTextNode('確認画面'));
confirm_area.appendChild(child); // confirm_area の末尾に child を追加
div = document.createElement("div");
child = document.createElement("p");
child.appendChild(document.createTextNode("質問タイトル：" + title_value));
div.appendChild(child); // div の末尾に child を追加
confirm_area.appendChild(div); // confirm_area の末尾に div を追加
div = document.createElement("div");
child = document.createElement("p");
child.appendChild(document.createTextNode("名前：" + namae_value));
div.appendChild(child); // div の末尾に child を追加
confirm_area.appendChild(div); // confirm_area の末尾に div を追加
div = document.createElement("div");
child = document.createElement("p");
child.appendChild(document.createTextNode("質問文：" + question_value));
div.appendChild(child); // div の末尾に child を追加
confirm_area.appendChild(div); // confirm_area の末尾に div を追加
div = document.createElement("div");
child = document.createElement("input");
child.type = "radio";
child.name = "stamp";
child.id = "confirm_stamp";
child.value = stamp_value;
child.checked = true;
div.appendChild(child); // div の末尾に child を追加
child = document.createElement("label");
child.htmlFor = "confirm_stamp";
div.appendChild(child); // div の末尾に child を追加
confirm_area.appendChild(div); // confirm_area の末尾に div を追加
</script>
－－－－

それをブラウザで開いてElementsを確認するとこんな風になります。
－－－－
<div id="confirm_area">
<h2>確認画面</h2>
<div>
<p>質問タイトル：たいとる</p>
</div>
<div>
<p>名前：なまえ</p>
</div>
<div>
<p>質問文：しつもんぶん</p>
</div>
<div><input type="radio" name="stamp" id="confirm_stamp" value="1"><label for="confirm_stamp"></label></div>
</div>
－－－－

このできあがったＨＴＭＬを別のファイルconfirm.htmlに保存してブラウザで表示してみましょう。
そこまでできたら、スタンプ（ここではただのラジオボタンですが）がタイトルの右にくるように変更してみてください。
タイトルの右に表示する方法はたくさんあります。
質問者さまがいいと思う構成でＨＴＭＬを書きかえてください。
それをまたブラウザで確認して完成させてください。

そこまでできたら、今度は、そのＨＴＭＬが生成できるようにinput.htmlのスクリプトを変更してみてください。
それで正しく表示されたら、そのコードにならって、実装してみてください。

お礼

回答が遅くなってしまい申し訳ありません。

補足

アドバイスありがとうございます。ＨＴＭＬを書いてからJavascriptを書くように気を付けます。
下記 HTML を確認画面で表示したいのですが、複数分からないところがあり dell_ok さんにお聞きしたいです。

質問➀
<div class="board_form_partial" id="js_board_form_partial">で class と id を両方実装することは可能でしょうか？

質問➁
<div class="image-partial">
<div class="image-camera-icon">を続けて実装したい場合、下記コードを2回連続で書くのでしょうか？
div.appendChild(child); // div の末尾に child を追加
confirm_area.appendChild(div); // confirm_area の末尾に div を追加
div = document.createElement("div");

質問➂
<div class="image-camera-icon">
<img src="http://www.irasuto.cfbx.jp/wp-content/uploads/camera.png" class="changeImg" style="height: 100px;">
</div>
画像ごとに div を設定することは可能でしょうか？

質問➃
各 HTML に class名を追加したい場合どのように書けばよいのでしょうか…？

※参考サイト
https://eclair.blog/javascript-classlist-methods/

※確認画面で表示したいHTML
<div id="confirm_area" style="display: block;">
<div class="board_form_partial" id="js_board_form_partial">
<div class="questionHeader-partial">
<div class="title-partial parts"> <!-- title-partial + parts -->
質問タイトルテスト
</div>

<div class="stamp-partial">
<input type="radio" name="stamp" id="confirm_stamp" value="1"><label for="confirm_stamp"></label>
</div>

<div class="namae-partial parts"> <!-- title-partial + parts -->
名前テスト
</div>

<div class="body-partial parts"><!-- body-partial + parts -->
コメントテスト
</div>

<div class="image-partial">

<div class="image-camera-icon">
<img src="http://www.irasuto.cfbx.jp/wp-content/uploads/camera.png" class="changeImg" style="height: 100px;">
</div>

<div class="image-camera-icon">
<img src="http://www.irasuto.cfbx.jp/wp-content/uploads/camera.png" class="changeImg" style="height: 100px;">
</div>

<div class="image-camera-icon">
<img src="http://www.irasuto.cfbx.jp/wp-content/uploads/camera.png" class="changeImg" style="height: 100px;">
</div>
</div>

<div class="post-button"><!-- ボタンを押せなくする -->
<button type="button">入力画面へ戻る</button><button type="button" name="output">結果画面へ進む</button>
</div>
</div>
</div>
<!-- type、name、id、valueの順番 -->
</div>
</div>

※最新コード（sample.phpに実装したい HTML に合わせたJavascriptコードを書きました。）
https://wandbox.org/permlink/fpNbi8XKCwBrBAAP

回答No.18

dell_OK

・4行目のボタンを使用可能にするというのは非同期通信が完了後に５行目のボタンのクラスからwaitを削除（もとのボタンに戻ります）元のボタンとして送信→確認画面に切り替わるということでしょうか？

切り替わるのはその後の処理です。
使用可にしているのは、確認画面から入力画面に戻る時に使用不可のままにならないようにするためです。
なので、戻る時に使用可にしてもいいのですが、コードが分離してしまうので、わかりやすい位置に入れました。

補足

解説ありがとうございます、理解出来ました。
確認画面の表示する順番を下記のように変更したいのですが、
スタンプ画像を表示するコード（bbs_quest_input.phpの322行目から333行目）を移動させたい場合、質問タイトルの下（bbs_quest_input.phpの314行目）に移動させるだけで良いのでしょうか？
タイトル　スタンプ
名前
メッセージ
画像

※最新コード
https://wandbox.org/permlink/fXDPhFGfxgK4cqKp

回答No.17

dell_OK

・名前 = $namae = 匿名 という認識なのですが、変数名に間違いがあるのでしょうか？

質問者さまのコード（回答No.14の補足）は以下のようになっていたので訂正コードを書きました。
－－－－
if($name == ""){ $name = "匿名"; }
－－－－

補足

回答ありがとうございます、勘違いしておりました申し訳ありません…

回答No.16

dell_OK

・強制的にローディングを終了するというのが難しいのではないかと思っているのですが可能でしょうか？

ローディングはそのページが表示されるタイミングのことなので、ボタンが押された一時的な場面ではありません。
参考サイトを見ると、どちらも以下のようなイベント（タイミング）での話しです。
　$(window).on('load'
　window.addEventListener('load'
タイミングはボタンが押された時などで置きかえるような考え方もできますが、おそらくそのスタイルシートもあまりいいものではないような気がします。

・ボタンの上に画像を重ねてレイアウトしておいて、状況に応じて一方（＝上になっている要素）の表示/非表示を制御する

こちらの方が扱いやすそうな気はします。

ですが、そこまでしなくてもできます。
先日「ひと目でステータスが分かる送信ボタン」はタイミングが違う注意をしましたが、それだけのことですので、別々のタイミングでそれぞれの処理をするだけです。

まずは「クリックされた時」に適用するスタイルシートです。
円がくるくるまわっているように見えるものです。
参考サイトのスタイルシートをもとに最小限にしてみました。
もとのクラス名は「onclic」を「wait」にしました。
－－－－
<style>
.wait {
height: 40px;
width: 40px;
border-radius: 40px;
border: 3px solid;
border-color: #bbbbbb;
border-left-color: #1ECD97;
font-size: 0;
animation: rotating 2s 0.25s linear infinite;
}

@keyframes rotating {
from {
transform: rotate(0deg);
}

to {
transform: rotate(360deg);
}
}
</style>
－－－－

「クリックされた時」の処理です。
２行目から４行目を追加してください。
２行目：submit_buttonに要素を定義しています
３行目：ボタンが２度押しされないように使用不可にしています
４行目：ボタンのクラスにwaitを追加しています（くるくるまわるスタイルシートが反映されます）
－－－－
const submit_button_click = function() {
const submit_button = document.getElementById("submit_button");
submit_button.disabled = true;
submit_button.classList.add('wait');
namae_value = "";
－－－－

「非同期通信が完了して応答があった時」の処理です。
４行目と５行目を追加してください。
４行目：ボタンを使用可にしています
５行目：ボタンのクラスからwaitを削除しています（もとのボタンに戻ります）
－－－－
//非同期通信
fetch("<?php echo home_url('wp-admin/admin-ajax.php'); ?>", opt)
.then(response => {
submit_button.disabled = false;
submit_button.classList.remove('wait');
return response.json();
－－－－

補足

Q.ローディングはそのページが表示されるタイミングのことなので、ボタンが押された一時的な場面ではありません。
タイミングはボタンが押された時などで置きかえるような考え方もできますが、おそらくそのスタイルシートもあまりいいものではないような気がします。

・ボタンの上に画像を重ねてレイアウトしておいて、状況に応じて一方（＝上になっている要素）の表示/非表示を制御する

A.解説ありがとうございます。どちらの方法もコードが複雑になるのではないかと懸念しておりました。

Q.先日「ひと目でステータスが分かる送信ボタン」はタイミングが違う注意をしましたが、それだけのことですので、別々のタイミングでそれぞれの処理をするだけです。

A.回答ありがとうございます、ローディング画像が終わるタイミングと非同期通信が終わるタイミングで大きなずれが生じることが一番の問題点ではないかと考えておりました。

「非同期通信が完了して応答があった時」の処理です。
４行目と５行目を追加してください。
４行目：ボタンを使用可にしています
５行目：ボタンのクラスからwaitを削除しています（もとのボタンに戻ります）
－－－－
//非同期通信
fetch("<?php echo home_url('wp-admin/admin-ajax.php'); ?>", opt)
.then(response => {
submit_button.disabled = false;
submit_button.classList.remove('wait');
return response.json();
－－－－x

A.コード修正ありがとうございます。1つ疑問があるのですが、4行目のボタンを使用可能にするというのは非同期通信が完了後に５行目のボタンのクラスからwaitを削除（もとのボタンに戻ります）元のボタンとして送信→確認画面に切り替わるということでしょうか？

※最新コード
https://wandbox.org/permlink/vn2Qhc7kaDWX3Jsk