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.35

dell_OK

・console でエラーが出ていない為どこを修正すればよいか分かりませんでした

そうですね。
今は、エラーが起きても何もしない、と言うコードになっています。
エラーが起きたことを知る方法が　catch()　です。
名前は、エラーを「キャッチする」（つかまえる）と言うことに由来していると思います。
この部分です。
－－－－
.catch(error => {});
－－－－

エラーをキャッチする処理を書くとJavaScript実行は「じゃあエラーはそっちの処理に任せますので標準実装のエラー表示はしません」と言う感じになります。
エラーをキャッチした後の処理は {} の中に書きます。
今は何も書いていないので、何も処理されず、何もなかったかのように見えています。

error　にはエラーの情報が入っているので、以下のようにしておくといいです。
－－－－
.catch(error => {
console.log(error);
});
－－－－
コンソールに表示するだけですね。
これでエラーが表示されるようになりますので、それに対応してみてください。

ですが、これは開発中にエラーを知るためのもので、本番になった場合は、エラーが起こらない前提か、想定しているエラーに対応する必要があると思いますので、このままでいいわけではありません。
とは言っても、何が起こるかわからないので、当面はこれだけにしておきましょう。

ちょっと確認してみましたが、エラーになりそうな箇所がいくつかあるので、発生のつどひとつずつ解決してみてください。

それと、回答No.32にも書きましたが、ステップ表示のＨＴＭＬは、input_areaよりも前です。
－－－－
<div class="questionHeader-partial">
　～
</div>
<div id="input_area">
－－－－
ここは常に表示されている領域です。
input_areaは確認画面になると非表示になるので、ステップも一緒に消えてしまいます。

補足

A.アドバイスありがとうございます。 catch() でエラーを取得できるというのを忘れておりました。申し訳ありません。

Q.ちょっと確認してみましたが、エラーになりそうな箇所がいくつかあるので、発生のつどひとつずつ解決してみてください。
それと、回答No.32にも書きましたが、ステップ表示のＨＴＭＬは、input_areaよりも前です。
input_areaは確認画面になると非表示になるので、ステップも一緒に消えてしまいます。

A.訂正ありがとうございます、 input_area より外に出すように修正いたしました。
エラーを確認したところ下記のように表示されており、参照している変数が存在しないと書かれているようなのですが、1つの HTMLタグに複数のクラスを追加する方法について調べた際に答えが出てこず、以前 dell_ok さんにもお聞きしているため正解が分からない状態です…
ReferenceError: divJsBoardFormPartial is not defined at 質問掲示板/:441:17

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

※該当ページ
https://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e6%8e%b2%e7%a4%ba%e6%9d%bf/

回答No.34

dell_OK

・onclick属性を追加するコードを追加いたしました。

onclickは不要です。

function change1()などの定義はinitの外に出してください。

initの中には、初期表示のために　change1();　を追加してください。

「入力画面に戻る」ボタンのところにも　change1();　を追加してください。
－－－－
child.innerText = "入力画面へ戻る";
child.addEventListener("click", () => {
change1();
input_area.style.display = "block";
// 空文字を入れることで要素内を空にできる
confirm_area.textContent = '';
confirm_area.style.display = "none";
});
－－－－

change2();やchange3()は、それぞれ非同期処理内に書いてください。
－－－－
const submit_button_click = function() {
～
.then(json => {
if (json.error != "") {
alert(json.error);
return;
}
change2();
// 空文字を入れることで要素内を空にできる
～
const confirm_button_click = function() {
～
.then(json => {
if (json.error != "") {
alert(json.error);
return;
}
change3();
// 空文字を入れることで要素内を空にできる
－－－－

補足

Q.function change1()などの定義はinitの外に出してください。
initの中には、初期表示のために　change1();　を追加してください。
「入力画面に戻る」ボタンのところにも　change1();　を追加してください。

A.訂正ありがとうございます、定義は init の外で問題ないのですね。
change1(); を入力画面に戻るところにも追加するのを忘れておりました、申し訳ありません。

Q.change2();やchange3()は、それぞれ非同期処理内に書いてください。

A.訂正ありがとうございます。change2();とchange3()はＨＴＭＬの書きかえと同じタイミングで行うから非同期処理内ということで理解できました。

上記とは別に確認画面に進むボタンが機能しなくなってしまったのですが、原因として考えられることはありますでしょうか？
const で設定したクラスによってボタン操作に影響が出そうなコードが見当たらず console でエラーが出ていない為どこを修正すればよいか分かりませんでした…

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

回答No.33

dell_OK

非同期処理などいろいろ省略していますが、大まかにはこんな感じになると思います。
－－－－
<style>
.step_img {
height: 364px;
width: 36px;
}
</style>
<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" id="q_text"></span>
</h2>
<div class="other_step">
<img id="step_img">
</div>
</div>
<div id="input_area">
<div class="namae-partial parts">
<h2>名前(name)<span class="required">※任意</span></h2>
<div class=parts>
<input class="input" type="text" name="namae" id="name">
</div>
</div>
<div class="post-button">
<button type="button" id="submit_button" name="mode" value="confirm">確認画面へ進む</button>
</div>
</div>
<div id="confirm_area"></div>
<div id="result_area"></div>
<script>
const step_img = document.getElementById("step_img");
const q_text = document.getElementById("q_text");
const input_area = document.getElementById("input_area");
const confirm_area = document.getElementById("confirm_area");
const result_area = document.getElementById("result_area");
const init = function () {
document.getElementById("submit_button").addEventListener("click", submit_button_click);
change1();
}
const submit_button_click = function () {
change2();
namae_value = document.getElementById("name").value;
confirm_area.textContent = '';
const divNamaePartialParts = document.createElement("div");
child = document.createElement("p");
child.appendChild(document.createTextNode(namae_value));
divNamaePartialParts.appendChild(child);
confirm_area.appendChild(divNamaePartialParts);
const divPostButton = document.createElement("div");
child = document.createElement("button");
child.type = "button";
child.textContent = "入力画面へ戻る";
child.addEventListener("click", () => {
change1();
input_area.style.display = "block";
confirm_area.textContent = '';
confirm_area.style.display = "none";
});
divPostButton.appendChild(child);
child = document.createElement("button");
child.type = "button";
child.textContent = "結果画面へ進む";
child.addEventListener("click", confirm_button_click);
divPostButton.appendChild(child);
confirm_area.appendChild(divPostButton);
input_area.style.display = "none";
confirm_area.style.display = "block";
}
const confirm_button_click = function () {
change3();
namae_value = document.getElementById("name").value;
const divNamaePartialParts = document.createElement("div");
child = document.createElement("p");
child.appendChild(document.createTextNode(namae_value));
divNamaePartialParts.appendChild(child);
result_area.appendChild(divNamaePartialParts);
confirm_area.style.display = "none";
result_area.style.display = "block";
}
function change1() {
q_text.textContent = "質問する";
step_img.src = "http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/step01.png";
step_img.alt = "STEP1 入力";
}
function change2() {
q_text.textContent = "確認する";
step_img.src = "http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/step02.png";
step_img.alt = "STEP2 確認";
}
function change3() {
q_text.textContent = "完了";
step_img.src = "http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/step03.png";
step_img.alt = "STEP3 完了";
}
init();
</script>
－－－－

お礼

説明不足で申し訳ありません。
sample.php の130行目と432行目にonclick属性を追加するコードを追加いたしました。
window.addEventListener("DOMContentLoaded", init); でファイルアップロード時にカメラ画像を非表示にするコードと入力可能な文字数を表示するコードをまとめる必要があり、加えて画像の切り替えを行っているため問題が生じているのではないかと考えております…

※該当ページ
https://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e6%8e%b2%e7%a4%ba%e6%9d%bf/

※参考サイト
https://qiita.com/oiz-y/items/cf021783c2ee78ae3c5c

補足

修正ありがとうございます。dell_ok さんに頂いたコードを実行して確認後に既存のコードと組み合わせてみたのですが、確認画面に進めなくなってしまいました。
HTML を切り替えるコードとの組み合わせが難しく理解が追いついていないのですが、原因はわかりますでしょうか？

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

回答No.32

dell_OK

・sample.php の33行目のコードも入力→確認→完了の3つの画面で表示する共通のクラスになるのですが、<div id="confirm_area"> の真下に直接書いても問題ないでしょうか？

そのスタイルの使用が登場するよりも前に書いておいた方がいいと思います。
<div id="confirm_area">よりも前ですね。
本実装ではinput_areaよりも前です。

・非同期通信の中に書くべきか悩んでおります。

「非同期通信の中に書く」と聞くと、以下のところに書くように感じるので、そうでなければその表現はやめてほしいです。
－－－－
fetch()
.then(()=>{ここに書く})
.then(()=>{ここに書く})
.catch();
－－－－
ここには直接ＨＴＭＬを書いたり、普通の関数定義（function）も書いたりしません。
ＨＴＭＬを変更する処理を書いたり、関数を呼ぶ処理を書いたりはしますが、そのことを、さもＨＴＭＬを書くようだったり、関数定義を書くように聞こえてしかたないです。
それに、fetchに直接関係がない場合は、非同期がどうのこうのとは言わないでください。
同期であろうと非同期であろうと書くことは同じだったりする場合に聞くと混乱してしまいます。
今やっていることは、単純にＨＴＭＬの配置と、ＨＴＭＬの書きかえですから、同期非同期は関係ありません。
書きかえの処理を呼ぶタイミングが非同期処理内であったりするだけです。

・sample.php の113行目からsrc属性の追加・変更するコードを参考サイトを元に追加してみたのですが

追加した理由がわかりませんが、何か問題がありましたか。

参考サイトの移植ができていません。
－－－－
const imgElem = document.getElementById("img");
document.setAttribute("src", "http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/step01.png");
document.getElementById("step_img").alt = "STEP1 入力";
－－－－訂正
const imgElem = document.getElementById("step_img"); /*ＩＤが間違っている*/
imgElem.setAttribute("src", ""); /*対象が間違っている*/
imgElem.alt = "STEP1 入力"; /*ここも変数にした方がいい*/
－－－－

ですが、imgElemは関数のそとで定義した方がいいですね。

・入力画面の HTML はそのままで function change1() {} は削除するという感じになるのでしょうか？

ＨＴＭＬはなるべく簡単に、 function change1() {} は必要です。
本実装ではinit()の中で呼ぶようになると思います。
テストコードではスクリプトの一番下にでも入れましょう。

補足

Q.<div id="confirm_area">よりも前ですね。
本実装ではinput_areaよりも前です。

A.回答ありがとうございます、SEO を考えて input_areaよりも後に書きたい場合はＨＴＭＬの書きかえで書く方法が良いでしょうか？

Q.「非同期通信の中に書く」と聞くと、以下のところに書くように感じるので、そうでなければその表現はやめてほしいです。
ここには直接ＨＴＭＬを書いたり、普通の関数定義（function）も書いたりしません。
ＨＴＭＬを変更する処理を書いたり、関数を呼ぶ処理を書いたりはしますが、そのことを、さもＨＴＭＬを書くようだったり、関数定義を書くように聞こえてしかたないです。

A.回答ありがとうございます、申し訳ありませんでした以後気を付けます。

Q.それに、fetchに直接関係がない場合は、非同期がどうのこうのとは言わないでください。
同期であろうと非同期であろうと書くことは同じだったりする場合に聞くと混乱してしまいます。
今やっていることは、単純にＨＴＭＬの配置と、ＨＴＭＬの書きかえですから、同期非同期は関係ありません。
書きかえの処理を呼ぶタイミングが非同期処理内であったりするだけです。

A.回答ありがとうございます、ＨＴＭＬの書きかえを非同期通信と一色単にしておりました申し訳ありません。
多用しないように致します。

Q.追加した理由がわかりませんが、何か問題がありましたか。

A.回答ありがとうございます、入力画面の HTML を消さずに function change1() {} を実装した場合2重で表示されてしまうので、 HTML はどこまで残しておくべきか悩んでおりました。

回答No.31

dell_OK

・<div class="questionHeader-partial"></div> を非同期通信の中に入れたい場合外に出してしまうと <div id="confirm_area" style="display: block;"> 内に出力できないのではないでしょうか？

そうですね。
画像を切りかえるだけなので、confirm_areaの中に入れる必要はないと思います。

・下記コードで画像を切り替える場合 HTML を削除することになると思うのですが、src属性の追加コードに変更する必要はありますでしょうか？

ＨＴＭＬを削除する必要はありません。

変更しない属性を設定する必要はないと思います。
－－－－
document.getElementById("step_img").style.Height = "364px";
document.getElementById("step_img").style.Width = "36px";
－－－－
<img>タグに直接書くか、スタイルシートで指定するか、でいいと思います。
もし画像を変えることになった場合、変更箇所が増えてしまうからです。

補足

・<div class="questionHeader-partial"></div> を非同期通信の中に入れたい場合外に出してしまうと <div id="confirm_area" style="display: block;"> 内に出力できないのではないでしょうか？

そうですね。
画像を切りかえるだけなので、confirm_areaの中に入れる必要はないと思います。

A.アドバイスありがとうございます。入れる方向で考えていたのですが、フォーム外なので外で実装したほうが良さそうですね。

<div class="questionHeader">
<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>

Q.ＨＴＭＬを削除する必要はありません。

変更しない属性を設定する必要はないと思います。
－－－－
document.getElementById("step_img").style.Height = "364px";
document.getElementById("step_img").style.Width = "36px";
－－－－
<img>タグに直接書くか、スタイルシートで指定するか、でいいと思います。
もし画像を変えることになった場合、変更箇所が増えてしまうからです。

A.アドバイスありがとうございます。<img>タグに直接書くように変更いたしました。

sample.php の33行目のコードも入力→確認→完了の3つの画面で表示する共通のクラスになるのですが、<div id="confirm_area"> の真下に直接書いても問題ないでしょうか？
非同期通信の中に書くべきか悩んでおります。
sample.php の113行目からsrc属性の追加・変更するコードを参考サイトを元に追加してみたのですが、入力画面の HTML はそのままで function change1() {} は削除するという感じになるのでしょうか？

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

※参考サイト
https://web-engineer-wiki.com/javascript/src-get-add-del/

回答No.30

dell_OK

・➀Javascript で画像を切り替える場合、HTML 側に下記画像のコードは必要になるのでしょうか？

なるほどですね。
お試しのコードだったので、画像切り替えの関数を用意しましたが、入力画面が最初に表示された時にもこの関数を呼べばいいので、ＨＴＭＬにはなくていいと思います。

・➁画面を切り替えるのと同じタイミングという dell_ok さんの回答から非同期通信の中に書くべきかと思ったのですが

はい、非同期通信の中に書いてください。

それと、以下の部分は常に表示されているので、
－－－－
<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 width="364" height="36">
</div>
</div>
－－－－

<div id="confirm_area" style="display: block;">の外と言うか、<div id="input_area">の上に移動してください。

補足

Q.お試しのコードだったので、画像切り替えの関数を用意しましたが、入力画面が最初に表示された時にもこの関数を呼べばいいので、ＨＴＭＬにはなくていいと思います。

A.回答ありがとうございます、了解いたしました。

Q.はい、非同期通信の中に書いてください。

それと、以下の部分は常に表示されているので、
－－－－
<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 width="364" height="36">
</div>
</div>
－－－－

<div id="confirm_area" style="display: block;">の外と言うか、<div id="input_area">の上に移動してください。

A.アドバイスありがとうございます。2点疑問があるのですが、<div class="questionHeader-partial"></div> を非同期通信の中に入れたい場合外に出してしまうと <div id="confirm_area" style="display: block;"> 内に出力できないのではないでしょうか？
別途出力するほうが良いかと考えていたのですが、<div id="confirm_area" style="display: block;"> 内に出力したいのであれば、非同期通信で追加する方法しかないのではないかと考えております…

下記コードで画像を切り替える場合 HTML を削除することになると思うのですが、src属性の追加コードに変更する必要はありますでしょうか？

※参考サイト
https://web-engineer-wiki.com/javascript/src-get-add-del/

<script>
function change1() {
document.getElementById("q-text").textContent = "質問する";
document.getElementById("step_img").src = "http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/step01.png";
document.getElementById("step_img").style.Height = "364px";
document.getElementById("step_img").style.Width = "36px";
document.getElementById("step_img").alt = "STEP1 入力";
}

function change2() {
document.getElementById("q-text").textContent = "確認する";
document.getElementById("step_img").src = "http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/step02.png";
document.getElementById("step_img").style.Height = "364px";
document.getElementById("step_img").style.Width = "36px";
document.getElementById("step_img").alt = "STEP2 確認";
}

function change3() {
document.getElementById("q-text").textContent = "完了";
document.getElementById("step_img").src = "http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/step03.png";
document.getElementById("step_img").style.Height = "364px";
document.getElementById("step_img").style.Width = "36px";
document.getElementById("step_img").alt = "STEP3 完了";
}
</script>

回答No.29

dell_OK

・画像のURLのみ表示→確認→結果で切り替わる場合、修正後のコードか別途生成する方法どちらを選択すべきでしょうか？

画像ＵＲＬを切り替えるだけの方がいいと思います。
その処理だけで言うとコードは、それぞれに３行だけになります。
alt属性があったので３行ですが、不要であれば２行になります。
質問者さまのタイトには今のところ完了の画像がないのでaltの役割をはたしてくれているのが確認できると思います。
以下のコードをローカルで試してみてください。
－－－－
<div>
<h2>
<span id="q-text" class="q-text">質問する</span>
</h2>
</h2>
<img id="step_img" src="http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/step01.png" width="364" height="36" alt="STEP1 入力">
</div>
<div>
<button type="button" onclick="change1();">質問する</button>
<button type="button" onclick="change2();">確認する</button>
<button type="button" onclick="change3();">完了</button>
</div>
<script>
function change1() {
document.getElementById("q-text").textContent = "質問する";
document.getElementById("step_img").src = "http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/step01.png";
document.getElementById("step_img").alt = "STEP1 入力";
}
function change2() {
document.getElementById("q-text").textContent = "確認する";
document.getElementById("step_img").src = "http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/step02.png";
document.getElementById("step_img").alt = "STEP2 確認";
}
function change3() {
document.getElementById("q-text").textContent = "完了";
document.getElementById("step_img").src = "http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/step03.png";
document.getElementById("step_img").alt = "STEP3 完了";
}
</script>
－－－－
それを、画面を切り替えるのと同じタイミングでするだけです。

補足

Q.画像ＵＲＬを切り替えるだけの方がいいと思います。
その処理だけで言うとコードは、それぞれに３行だけになります。
alt属性があったので３行ですが、不要であれば２行になります。
質問者さまのタイトには今のところ完了の画像がないのでaltの役割をはたしてくれているのが確認できると思います。
以下のコードをローカルで試してみてください。
それを、画面を切り替えるのと同じタイミングでするだけです。

A.アドバイスありがとうございます。alt属性はそのまま実装したいと考えております。完了画面にも画像を用意する予定です。
いくつか質問があるのですが、

➀Javascript で画像を切り替える場合、HTML 側に下記画像のコードは必要になるのでしょうか？
Javascript 側の function change1() {} とどちらを優先させて、どういう風に切り替えるのか想像できずお聞きしたいです。

<img id="step_img" src="http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/step01.png" width="364" height="36" alt="STEP1 入力">

➁画面を切り替えるのと同じタイミングという dell_ok さんの回答から非同期通信の中に書くべきかと思ったのですが、<div class="board_form_partial" id="js_board_form_partial"> が
ステップフロー画像とタイトル、スタンプ、名前、コメント、ファイルアップロードを挟む形になっているため、1つにまとめる方法が分からず悩んでおります…

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

※確認画面で表示したい 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>

回答No.28

dell_OK

・sample.phpの382行目と396行目のコードについて親はBになるのではないでしょうか？

そうでうね。

・案2を使う場合 HTML class ごとにプロパティ名は必要ということになるのでしょうか？

HTMLの要素タグごとに必要になってくると思います。
クラス名をプロパティ名にするのは無理があると思います。

先日、画像表示の処理をクラス名にならって変更しました。
－－－－
const image_partial_div = document.createElement("div");
image_partial_div.classList.add("image-partial");
－－－－
３画像とも同じクラス名です。
オブジェクトのプロパティ名でアクセスすると同じものは上書きしてしまいます。
例えばこう書いたとします。
－－－－
variable001["image-partial"] = document.createElement("div");
－－－－
画像はループ処理なので繰り返しこのコードが実行され上書きされるので最後に処理した画像しか表示されなくなります。
それを回避するには以下のような処理になるようにプロパティ名が重複しないようにする必要があります。
－－－－
variable001["image-partial-1"] = document.createElement("div");
variable001["image-partial-2"] = document.createElement("div");
variable001["image-partial-3"] = document.createElement("div");
－－－－
実際のコードは「-1」「-2」「-3」のところはプログラムでループ回数で編集することになります。

補足

Q.HTMLの要素タグごとに必要になってくると思います。
クラス名をプロパティ名にするのは無理があると思います。

画像はループ処理なので繰り返しこのコードが実行され上書きされるので最後に処理した画像しか表示されなくなります。
それを回避するには以下のような処理になるようにプロパティ名が重複しないようにする必要があります。
－－－－
variable001["image-partial-1"] = document.createElement("div");
variable001["image-partial-2"] = document.createElement("div");
variable001["image-partial-3"] = document.createElement("div");
－－－－
実際のコードは「-1」「-2」「-3」のところはプログラムでループ回数で編集することになります。

A.解説ありがとうございます、理解することが出来ました。
案1のほうが使いやすい気がするためそちらを採用する方向で考えてみます。

回答No.27

dell_OK

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>
－－－－

スクリプトの間違いを指摘するのは大変そうなのでやめておきます。
と言うほど間違いがあると言うわけではありませんが、間違いのほとんどは、生成した要素を追加していないか、追加先が違うかです。
そのような間違いをなるべくしないための作り方として私がやっている作り方はこんな感じです。
要素タグだけのＨＴＭＬを生成して追加し、期待しているＨＴＭＬになるかを確認することです。
ここで親子関係や兄弟関係をしっかり確認できます。
生成した要素は、その直後に追加しておくと追加忘れしなくてすみます。
まずはこのコードを実行して確認してみてください。
私が間違えているかも知れないので必ず確認してください。
スクリプトの上でも下でも構いませんので、上記のＨＴＭＬも書いておいてください。
ブラウザで開いた時にElementsタブで見比べて確認するためです。
－－－－
<script>
const divQuestionHeaderPartial = document.createElement("div"); // div (親)を生成

const child = document.createElement("h2"); // h2 (子)を生成
divQuestionHeaderPartial.appendChild(child); // divQuestionHeaderPartial (親要素) の末尾に h2 を追加

const grandchild = document.createElement("span"); // span (孫)を生成
child.appendChild(grandchild); // h2 (子要素) の末尾に grandchild を追加

const greatGrandchildOldest = document.createElement("i"); // i (ひ孫一番目)を生成
grandchild.appendChild(greatGrandchildOldest); // grandchild (孫要素) の末尾に i (ひ孫一番目)を追加

const greatGrandchildSecondOldest = document.createElement("i"); // i (ひ孫二番目)を生成
grandchild.appendChild(greatGrandchildSecondOldest); // grandchild (孫要素) の末尾に i (ひ孫二番目)を追加

const grandchildSecond = document.createElement("span"); // span (孫二番目)を生成
child.appendChild(grandchildSecond); // h2 (子要素) の末尾に grandchildSecond を追加

const childSecond = document.createElement("div"); // div (子)を生成
divQuestionHeaderPartial.appendChild(childSecond); // divQuestionHeaderPartial (親要素) の末尾に div を追加

const grandchildThird = document.createElement("img"); // img (孫三番目)を生成
childSecond.appendChild(grandchildThird); // div (子要素) の末尾に grandchildThird を追加

document.body.appendChild(divQuestionHeaderPartial);
</script>
－－－－

クラス名を含む属性はすべてあとから追加します。
createElement()とappendChild()はセットにしているので、この間にクラスや属性を追加する処理を書いてみてください。
－－－－
const ～ = document.createElement(～);
　　クラスや属性を追加する処理
～.appendChild(～);
－－－－

コメントがタグ名だったり変数名だったりで混乱しているのであまり書かない方がいいと思いますが、書くなら書くできっちり間違えず統一して書くようにしてください。
もしコメントに間違いがあると、そのコメントを頼って書いたコード側に間違いができてしまうからです。

補足

Q.HTMLは階層がわかるように書きましょう。
間違いのほとんどは、生成した要素を追加していないか、追加先が違うかです。
要素タグだけのＨＴＭＬを生成して追加し、期待しているＨＴＭＬになるかを確認することです。
生成した要素は、その直後に追加しておくと追加忘れしなくてすみます。
コメントがタグ名だったり変数名だったりで混乱しているのであまり書かない方がいいと思いますが、書くなら書くできっちり間違えず統一して書くようにしてください。
もしコメントに間違いがあると、そのコメントを頼って書いたコード側に間違いができてしまうからです。

A.アドバイスありがとうございます。階層ごとに書くように気を付けます。
一気に全部やろうとしておりました、class の追加は後からの方が良いですね。
生成したHTMLをブラウザでチェックするように致します。
sample.php の確認画面では const 宣言を多用されていなかったので省いてみたのですが、初めに var で宣言していたことを忘れておりました…
コメントアウトは極力書かないように気を付けます。

dell_ok さんのアドバイスをもとに修正してみました。回答No.25の下記の疑問についてどうすべきか分からないのですが、画像のURLのみ表示→確認→結果で切り替わる場合、修正後のコードか別途生成する方法どちらを選択すべきでしょうか？

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

※修正後のコード
－－－－
<script>
const divQuestionHeaderPartial = document.createElement("div"); // div (親)を生成
divQuestionHeaderPartial.classList.add("questionHeader-partial"); // classの追加

const child = document.createElement("h2"); // h2 (子)を生成
divQuestionHeaderPartial.appendChild(child); // divQuestionHeaderPartial (親要素) の末尾に h2 を追加

const grandchild = document.createElement("span"); // span (孫)を生成
grandchild.class = "fa-stack"; // classの追加
child.appendChild(grandchild); // h2 (子要素) の末尾に grandchild を追加

const greatGrandchildOldest = document.createElement("i"); // i (ひ孫一番目)を生成
greatGrandchildOldest.class = "fa fa-circle fa-stack-2x w-circle"; // classの追加
grandchild.appendChild(greatGrandchildOldest); // grandchild (孫要素) の末尾に i (ひ孫一番目)を追加

const greatGrandchildSecondOldest = document.createElement("i"); // i (ひ孫二番目)を生成
greatGrandchildSecondOldest.class = "fa-stack-1x fa-inverse q"; // classの追加
greatGrandchildSecondOldest.appendChild(document.createTextNode('Q')); // やしゃご要素として Text ノードを生成
grandchild.appendChild(greatGrandchildSecondOldest); // grandchild (孫要素) の末尾に i (ひ孫二番目)を追加

const grandchildSecond = document.createElement("span"); // span (孫二番目)を生成
grandchildSecond.class = "q-text"; // classの追加
grandchildSecond.appendChild(document.createTextNode('質問する')); // やしゃご要素として Text ノードを生成
child.appendChild(grandchildSecond); // h2 (子要素) の末尾に grandchildSecond を追加

const childSecond = document.createElement("div"); // div (子)を生成
childSecond.class = "other_step"; // classの追加
divQuestionHeaderPartial.appendChild(childSecond); // divQuestionHeaderPartial (親要素) の末尾に div を追加

const 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 入力"
childSecond.appendChild(grandchildThird); // div (子要素) の末尾に grandchildThird を追加

document.body.appendChild(divQuestionHeaderPartial);
</script>
－－－－

回答No.26

dell_OK

・案2. 変数名ではなくプロパティ名として書く方法は難しそうで、プロパティ名は class ごとに分けるべきか、HTMLタグごとのみ分けるだけで良いのか分からず sample.js に一部だけ書いてみました。

こんな方法があるんですね。
勉強になります。
面白そうなので試してみました。
ただ、プロパティ名にも空白が使えないようでした。
「Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('title-partial parts') contains HTML space characters, which are not valid in tokens.」
『キャッチされない DOMException: 'DOMTokenList' で 'add' の実行に失敗しました: 提供されたトークン ('title-partial Parts') には、トークンでは無効な HTML スペース文字が含まれています。』

エラーになったのは２行目なので、１行目のプロパティとして要素の生成はできているみたいです。
２行目のエラーとしては、プロパティを参照しようとして失敗した感じです。
－－－－
variable001["title-partial parts"] = document.createElement("div"); // div (子)を生成
variable001["title-partial parts"].classList.add("title-partial parts"); // classの追加
－－－－

JavaScriptのプロパティの記述方法は以下のような２通りがあります。
object.property;
object["property"];
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Property_accessors

２通りのどちらでも書ける必要があるのかもしれません。
今回の例で書きかえると、こうなります。
　variable001["title-partial parts"].classList.add("title-partial parts")
　↓
　variable001.title-partial parts.classList.add("title-partial parts")
ここでまた「title-partial」と「parts」の間に空白が入ることになるので、解釈できないと判断されてしまうのかも知れません。

補足

Q.２通りのどちらでも書ける必要があるのかもしれません。
今回の例で書きかえると、こうなります。
variable001["title-partial parts"].classList.add("title-partial parts")
↓
variable001.title-partial parts.classList.add("title-partial parts")

A.解説ありがとうございます。プロパティで空白は使えないんですね覚えておきます。
案2を使う場合 HTML class ごとにプロパティ名は必要ということになるのでしょうか？