WordPressの質問（q10297398）の続

質問

another_que_answer.php 393行目の divUserIcon.appendChild(usericonImg); の usericonImg はどのように定義すべきでしょうか？
質問画面ではアップロードファイルの後にアイコン画像のコードが書かれており2つの処理をまとめておくことが出来たのですが、回答画面では順番が逆になっているため悩んでおります。

先に var usericonImg; のみ宣言してしてみたのですがエラーが表示されておりどのように書けばよいかアドバイスお願い致します。

※エラー文
TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at 質問回答画面/:462:21

※最新コード
https://github.com/i6Grja3R/sample_theme.git

※質問回答画面
https://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e5%9b%9e%e7%ad%94%e7%94%bb%e9%9d%a2/

回答No.17

dell_OK

・1点疑問があるのですが、usericonImg は変化するのでしょうか？

どうでしょうね。
変化するのかどうかは関数外部のことなのでわかりません。
プログラムを作った時にはその人間にはわかっているかもしれませんが、
関数にはわかっていません。
時間がたつと作った人間にもわからなくなっていると思います。

余計な説明をしない方がいいのかも知れませんが。

一般的に関数は関数外部の状態については認識しないものです。
つまり関数外部の変数 usericonImg が変化するかどうかを認識していません。
なので img タグでできた要素かどうかも認識していません。
それがなんなのかわからないのです。
代入されているかも定義されているかもわかりません。
なので外部変数を使うとエラーになりやすかったりします。

この関数の役目は appendChild(usericonImg) をすることです。
usericonImg の内容についても関数は認識していません。
外部変数 usericonImg はどこでだれがどうしたものなのかなんなのかわからなさすぎますが、
引数 usericonImg は引数として渡されてきたものだと少しだけわかったつもりになれます。
どちらも内容についてはわからないままです。
しかしながら、引数は引数として定義されているので未定義エラーは発生しません。
外部で未定義かもしれない変数を使うよりエラーをふせげると思います。

・create_name_parts() 内のコードは引数（変数）で外に出ているコードは外部変数、bbs_quest_input.php と bbs_que_answer.php は引数を使って表示しているということですね。

そんな感じです。

補足

Q.外部変数を使うとエラーになりやすかったりします。

外部変数 usericonImg はどこでだれがどうしたものなのかなんなのかわからなさすぎますが、
引数 usericonImg は引数として渡されてきたものだと少しだけわかったつもりになれます。
どちらも内容についてはわからないままです。
しかしながら、引数は引数として定義されているので未定義エラーは発生しません。
外部で未定義かもしれない変数を使うよりエラーをふせげると思います。

A.解説ありがとうございます、外部変数を新たに用意するとエラーになりやすいということですね。

回答No.16

dell_OK

・HTML の書き換えコードを全て共通化してひとつの関数することを先にやっても大丈夫でしょうか？

どのようなことをされるのかわかりかねますが、
質問と回答のやりとりはお互いの都合で時間があいたりするので、
質問者さまができることはどんどん進めていただいて大丈夫です。

補足

回答ありがとうございます可能なことは進めように致します。
dell_ok さんに教えて頂いた通りコメント機能も共通化できそうだったのでまとめてみました。

Console でエラーが発生しており、エラー箇所の Node を確認してみたのですが const divBodyPartialParts = create_text_parts("answer-text-area", text_value); で宣言されているので原因が分かりません。
アドバイスお願い致します。

※ 質問画面エラー文
TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at 質問掲示板/:512:30

※ 質問画面
https://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e6%8e%b2%e7%a4%ba%e6%9d%bf/

※ 回答画面エラー文
TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at 質問回答画面/:448:30

※ 回答画面
https://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e5%9b%9e%e7%ad%94%e7%94%bb%e9%9d%a2/

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

➀アップロードファイルと➁結果画面へ進むボタンの共通部分が多いため考えてみたのですが、どのように書けばよいか分からずお聞きしたいです。

➀ i の値がそれぞれ異なるコードをどうまとめればよいでしょうか？
※ アップロードファイルのコード比較（左側 bbs_que_answer.php、右側 bbs_quest_input.php）
https://difff.jp/6f8cg.html

➁ コードは全て同じなのですがどこからどこまでを response.js に書くべきかアドバイスお願い致します。

回答No.15

dell_OK

・他に関数内にない項目の name_value と usericonImg も引数にするということについてお聞きしたいのですが、p は何故含まれないのでしょうか？

固定で "p" と書かれていて、質問画面でも回答画面でも常に同じ値だからです。

・関数内にない項目というのをどこで判断すればよいのか分からず

そうですね。
「関数内にない」とは create_name_parts() 内で代入されていないと言うことです。
関数内で代入していないものは引数にする、と考えていただけれいいと思います。

基本的に関数内では関数の外の変数を使えません。
厳密には使えますが、
共通化の観点から外部変数を直接使うべきではないと思いますので、
ここでは使えないことにしておきます。

引数名をもとのコードの変数名のまま同じ名前にしたので混同されたかも知れませんが、
それは引っ越したコードをそのまま使うことで、
コードとしては何も変えていない、つまり、
同じ処理として動作するであろうと期待しやすくするためと、
名前を変更したことによるコーディングミスを発生させたくなかったからです。
引数の名前はなんでもいいのですから、外部変数と同じでもいいわけです。
名前が同じだけで、外部変数と引数では異なる概念なので気を付けてください。

create_name_parts() 内に登場する変数に name_value と usericonImg があります。
前述のとおりもとのコードから引っ越してきただけなのでそのまま使っていますが、
これらの変数はこの関数内では代入していないため値が入っていません。
厳密には、何が入っているかわからなさすぎる、約束されていないものです。

もとのコードでは、
name_value = json.name; や
usericonImg = document.createElement("img"); で代入したのちに、
その流れでこの変数を使って何かしているので、
その流れ全体が約束になっているようなものです。
途中で別の値を代入しない、その時点の値を使って何かする、という約束です。

共通化した関数内では、上記の代入処理をしているわけではないですし、
関数を呼ばれた時点で外部変数に期待している値が入っているかどうか定かではありません。
なので、使えない、使い物にならない、と言ったのです。
そこで、外部変数のかわりに引数を使って、呼ばれた時点で渡された値を使います。
表示する関数で例えると、
関数を呼ぶ側は、この値を表示してくれ、と表示したい値を引数で渡し、
呼ばれる関数側は、この引数の値を表示するよ、と受け取った引数を表示します。
この引数が約束です。

前にやった validation() で引数を使わなくても大丈夫だったのは、
関数内で取得したものを変数に代入していたためです。
let parts = document.getElementsByClassName('parts');
関数内外の約束は、クラス名に parts を使う、ということですね。

先の回答の "p" については、いつでもどこでも、
関数の外でも内でも "p" は "p" 以外のなにものでもないので、
"p" と書けばいいですし "p" としか書けません。

補足

Q.固定で "p" と書かれていて、質問画面でも回答画面でも常に同じ値だからです。

関数内で代入していないものは引数にする、と考えていただければいいと思います。

もとのコードでは、
name_value = json.name; や
usericonImg = document.createElement("img"); で代入したのちに、
その流れでこの変数を使って何かしているので、
その流れ全体が約束になっているようなものです。
途中で別の値を代入しない、その時点の値を使って何かする、という約束です。

関数を呼ばれた時点で外部変数に期待している値が入っているかどうか定かではありません。
なので、使えない、使い物にならない、と言ったのです。
そこで、外部変数のかわりに引数を使って、呼ばれた時点で渡された値を使います。

A.解説ありがとうございます、1点疑問があるのですが、usericonImg は変化するのでしょうか？
変数 usericonImg でタグの img を生成したから何が入っているかわからなさすぎる、約束されていないため引数（変数）としてまとめているという認識です。

create_name_parts() 内のコードは引数（変数）で外に出ているコードは外部変数、bbs_quest_input.php と bbs_que_answer.php は引数を使って表示しているということですね。

回答No.14

dell_OK

・➀は終了という事で➁を考えていきたいのですが、回答画面の確認ページの配置を入れ替えたい場合、順番を変更するだけで良いのでしょうか？

➀はまだやっていません。
いままでの共通化は文字入力に関する処理だけです。
ほとんど同じようなコードがで引っ越ししやすいので練習としてやっていただいたところです。

動作確認ができたのでしたら、コメントで残したコードは削除しておいてください。

他にも先にやっておきたいことがあるのですが、➀の実感がないようなのでひとつやってみましょう。
名前要素作成です。
－－－－bbs_quest_input.php
const divNamePartialParts = document.createElement("div"); // div (子)を生成
divNamePartialParts.classList.add("name-partial-parts"); // classの追加
child = document.createElement("p"); // p (孫)を生成
child.appendChild(document.createTextNode(name_value)); //孫要素として Text ノードを生成
child.style.display = "inline-block";
divNamePartialParts.appendChild(usericonImg);
divNamePartialParts.appendChild(child); // div (子要素) の末尾に child を追加
－－－－bbs_que_answer.php
const divNamePartialParts = document.createElement("div"); // div (子)を生成
divNamePartialParts.classList.add("answer-name-area"); // classの追加
child = document.createElement("p"); // p (孫)を生成
child.appendChild(document.createTextNode(name_value)); //孫要素として Text ノードを生成
child.style.display = "inline-block";
divNamePartialParts.appendChild(usericonImg);
divNamePartialParts.appendChild(child); // div (子要素) の末尾に child を追加
－－－－

ここを共通化してひとつの関数にできます。
違うのは２行目で追加しているクラス名なので引数にします。
他に関数内にない項目の name_value と usericonImg も引数にします。
－－－－
/* 名前要素作成 */
function create_name_parts(name_class, name_value, usericonImg) {
const divNamePartialParts = document.createElement("div"); // div (子)を生成
divNamePartialParts.classList.add(name_class); // classの追加
const child = document.createElement("p"); // p (孫)を生成
child.appendChild(document.createTextNode(name_value)); //孫要素として Text ノードを生成
child.style.display = "inline-block";
divNamePartialParts.appendChild(usericonImg);
divNamePartialParts.appendChild(child); // div (子要素) の末尾に child を追加
return divNamePartialParts;
}
－－－－

もとあったところはこんな風になります。
－－－－bbs_quest_input.php
/* 名前要素作成 */
const divNamePartialParts = create_name_parts("name-partial-parts", name_value, usericonImg);
comment_area.appendChild(divNamePartialParts); // comment_area (親要素) の末尾に div を追加
－－－－bbs_que_answer.php
const comment_area = document.createElement("div"); // const image_area の下から移動
/* 名前要素作成 */
const divNamePartialParts = create_name_parts("answer-name-area", name_value, usericonImg);
comment_area.appendChild(divNamePartialParts); // comment_area (親要素) の末尾に div を追加
－－－－

補足

Q.動作確認ができたのでしたら、コメントで残したコードは削除しておいてください。

ここを共通化してひとつの関数にできます。
違うのは２行目で追加しているクラス名なので引数にします。
他に関数内にない項目の name_value と usericonImg も引数にします。
－－－－
/* 名前要素作成 */
function create_name_parts(name_class, name_value, usericonImg) {
const divNamePartialParts = document.createElement("div"); // div (子)を生成
divNamePartialParts.classList.add(name_class); // classの追加
const child = document.createElement("p"); // p (孫)を生成
child.appendChild(document.createTextNode(name_value)); //孫要素として Text ノードを生成
child.style.display = "inline-block";
divNamePartialParts.appendChild(usericonImg);
divNamePartialParts.appendChild(child); // div (子要素) の末尾に child を追加
return divNamePartialParts;
}
－－－－

A.解説ありがとうございます。
他に関数内にない項目の name_value と usericonImg も引数にするということについてお聞きしたいのですが、p は何故含まれないのでしょうか？
関数内にない項目というのをどこで判断すればよいのか分からず dell_ok さんに教えていただきたいです。
HTML の書き換えコードを全て共通化してひとつの関数することを先にやっても大丈夫でしょうか？

※ 最新コード
https://github.com/i6Grja3R/sample_theme.git

回答No.13

dell_OK

・コードの意味を調べてみたのですが、if 条件が違う場合もまとめることは可能という事でしょうか？

そうではありません。

－－－－
if (!['name', 'title', 'text'].includes(e.target.id)) return;
－－－－
これは id が 'name' でも 'title' でも 'text' でもなかったら return するということです。
回答画面には id が 'title' のものはないので、この条件にあてはまって return することはないため、この条件で大丈夫なことになります。
もし今後回答画面に id が 'title' のものを追加した場合、その項目にも質問画面と同じように文字数制限をもたせ文字数表示をすることになるでしょうから、この条件で大丈夫なことになります。
もし文字数表示をしないということであれば、この条件を修正する必要がでてきます。

補足

Q.これは id が 'name' でも 'title' でも 'text' でもなかったら return するということです。
回答画面には id が 'title' のものはないので、この条件にあてはまって return することはないため、この条件で大丈夫なことになります。
もし今後回答画面に id が 'title' のものを追加した場合、その項目にも質問画面と同じように文字数制限をもたせ文字数表示をすることになるでしょうから、この条件で大丈夫なことになります。
もし文字数表示をしないということであれば、この条件を修正する必要がでてきます。

A.解説ありがとうございます、必要条件ではなく十分条件のような感じでしょうか…
回答画面にはタイトルはないですが名前とコメントはあるので条件を満たしているということで覚えておきます。

回答No.12

dell_OK

・function validation() {} も responce.js にまとめてみました

よさそうですね。

・その他のコードでまとめられる所はありますでしょうか？

文字数表示のところができそうです。
この部分を引っ越ししましょう。
－－－－bbs_quest_input.php
if (!['name', 'title', 'text'].includes(e.target.id)) return;
const
t = e.target,
m = t.nextElementSibling,
n = t.value.length - (t.dataset.length | 0),
c = document.createElement('strong');
//絶対値が欲しい時
c.append(Math.abs(n));
//classを設定
m.className = 'msg_partial';
m.style.color = n > 0 ? 'red' : 'black';
m.replaceChildren(n > 0 ? '' : '残り', c,
`文字${n > 0 ? '超過してい' : '入力でき'}ます。`);
－－－－

bbs_que_answer.php では１行目のところが少し違いますが、
－－－－
if (!['name', 'text'].includes(e.target.id)) return;
－－－－
この処理が何をしているのかわかっていれば、
bbs_quest_input.php のコードのままで大丈夫だと思います。

引っ越し先の response.js では新しい関数を追加します。
例えばこんな名前でいいと思います。
－－－－
/* 文字数表示 */
function display_text_length(e) {
if (!['name', 'title', 'text'].includes(e.target.id)) return;
const
t = e.target,
m = t.nextElementSibling,
n = t.value.length - (t.dataset.length | 0),
c = document.createElement('strong');
//絶対値が欲しい時
c.append(Math.abs(n));
//classを設定
m.className = 'msg_partial';
m.style.color = n > 0 ? 'red' : 'black';
m.replaceChildren(n > 0 ? '' : '残り', c,
`文字${n > 0 ? '超過してい' : '入力でき'}ます。`);
}
－－－－

もとあったところでこの関数を呼びます。
コメントを変更しました。
すっきりしましたね。
－－－－
/* inputイベント */
document.addEventListener('input', e => {
/* 文字数表示 */
display_text_length(e);
/* 毎回判定によるボタン制御 */
validation();
});
－－－－

質問画面と回答画面で動作確認してみてください。

補足

Q.この処理が何をしているのかわかっていれば、
bbs_quest_input.php のコードのままで大丈夫だと思います。
－－－－
/* 文字数表示 */
function display_text_length(e) {
// もし名前、タイトル、コメントがユーザーがフォームに入力した ID に含まれていなければ終了する
if (!['name', 'title', 'text'].includes(e.target.id)) return;
const
t = e.target, // イベントが発生した要素を取得
m = t.nextElementSibling, // イベントが発生した要素の親の子リスト内ですぐ次にある要素を返す
n = t.value.length - (t.dataset.length | 0), // イベントが発生した要素の値の長さマイナスイベントが発生した要素に設定されたすべてのカスタムデータ属性
c = document.createElement('strong'); // 新しい HTML 要素を作成するメソッド
//絶対値が欲しい時
c.append(Math.abs(n));
//classを設定
m.className = 'msg_partial';
m.style.color = n > 0 ? 'red' : 'black';
m.replaceChildren(n > 0 ? '' : '残り', c,
`文字${n > 0 ? '超過してい' : '入力でき'}ます。`);
}
－－－－

A.アドバイスありがとうございます。
コードの意味を調べてみたのですが、if 条件が違う場合もまとめることは可能という事でしょうか？
修正後確認したところ残りの文字数は表示されました。

※ 最新コード
https://github.com/i6Grja3R/sample_theme.git

※ 質問画面
https://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e6%8e%b2%e7%a4%ba%e6%9d%bf/

※ 回答画面
https://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e5%9b%9e%e7%ad%94%e7%94%bb%e9%9d%a2/

➀は終了という事で➁を考えていきたいのですが、回答画面の確認ページの配置を入れ替えたい場合、順番を変更するだけで良いのでしょうか？
コードを変更する前に心配なので dell_ok さんにお聞きしたいです。

➀要素を作成する処理は共通処理として response.js に書く
➁その要素を配置する処理を回答画面に直接書く

回答No.11

dell_OK

・function validation_text(parts) {} と function validation_text(contents) {} で関数名が異なるのに何故共通処理として書けるのかお聞きしたいです。

異なるのは関数名ではなく引数名です。
例えば、処理内容がこんなだったとします。
－－－－
function validation_text(parts) {
console.log(parts);
}
－－－－
function validation_text(contents) {
console.log(contents);
}
－－－－
引数名が違っていても、処理する内容も結果も同じです。
つまり引数名はなんでもいいことになります。

以前も関数の説明をした時に同じことを言ったと思います。
引数名はなんでもいいけど、わかりやすいものにしておくこと。

この共通化で重要なのは、引数名ではなく、
引数として渡されてきたものと処理内容です。

もとのコードを見比べてみましょう。
－－－－
function validation_text(parts) {
let text = parts.getElementsByClassName('input')[0];
if (text.value.length < text.dataset.minlength) {
return false;
}
if (text.value.length > text.dataset.length) {
return false;
}
return true;
};
－－－－
function validation_text(contents) {
let text = contents.getElementsByClassName('input')[0];
if (text.value.length < text.dataset.minlength) {
return false;
}
if (text.value.length > text.dataset.length) {
return false;
}
return true;
};
－－－－

違いはここだけです。
－－－－
let text = parts.getElementsByClassName('input')[0];
－－－－
let text = contents.getElementsByClassName('input')[0];
－－－－
引数で渡されてきた parts または contents をもとに getElementsByClassName() で、
その中の要素を取得して text に入れています。
これ以降はすべて text に対しての処理で同じです。
この関数は引数名が parts であろうと contents であろうとなにもかわりないものです。
ということでおわかりいただけるでしょうか。

・bbs_que_answer.php の180行目から /* バリデーション条件判断部分 */ もまとめられる気がしております。

そうですね。
まとめられます。
共通化は始まったばかりで、ここからが本番です。

validation() は引っ越しだけでは済みません。
なぜなら処理内容が異なるからです。
－－－－
let parts = document.getElementsByClassName('parts');
－－－－
let contents = document.getElementsByClassName('contents');
－－－－
validation_text() では共通してクラス'input'の要素を取得していましたが、
こちらのクラスは'parts'と'contents'で異なります。
質問画面と回答画面でデザインが異なりそのためにクラス名を別々にされているのでしょうかね。
仮に'parts'の処理を共通関数にした場合、
質問画面では問題なく動作しますが、
回答画面ではそのクラス名の要素がみつからなくて期待している動作になりません。

解決方法はいくつかあり、ぱっと思いつくものはこんな感じです。
案１．このクラス名が重要でなければ同じにしてしまう。
案２．このクラス名とは別に、この処理のための（デザインに関係のない）クラス名を追加する。
案３．この要素取得処理を関数を呼ぶ側でおこない、取得した要素を引数として渡してくる。
案４．クラス名を引数として渡してくる。
どのような方法がいいか検討してみてください。

補足

Q.以前も関数の説明をした時に同じことを言ったと思います。
引数名はなんでもいいけど、わかりやすいものにしておくこと。

この共通化で重要なのは、引数名ではなく、
引数として渡されてきたものと処理内容です。

A.解説ありがとうございます、内容を覚えておらず申し訳ありません…
引数名は異なる場合も処理内容が同じであれば問題ないということで覚えておきます。

Q.違いはここだけです。
－－－－
let text = parts.getElementsByClassName('input')[0];
－－－－
let text = contents.getElementsByClassName('input')[0];
－－－－
この関数は引数名が parts であろうと contents であろうとなにもかわりないものです。
ということでおわかりいただけるでしょうか。

A.解説ありがとうございます。
getElementsByClassName() メソッドは、引数で与えられたクラス名を含むすべての子要素を、生きた HTMLCollection で返す処理なので、引数名が変わっても問題ないということですね。

Q.validation() は引っ越しだけでは済みません。
なぜなら処理内容が異なるからです。
－－－－
let parts = document.getElementsByClassName('parts');
－－－－
let contents = document.getElementsByClassName('contents');
－－－－

解決方法はいくつかあり、ぱっと思いつくものはこんな感じです。
案１．このクラス名が重要でなければ同じにしてしまう。
案２．このクラス名とは別に、この処理のための（デザインに関係のない）クラス名を追加する。
案３．この要素取得処理を関数を呼ぶ側でおこない、取得した要素を引数として渡してくる。
案４．クラス名を引数として渡してくる。
どのような方法がいいか検討してみてください。

A.アドバイスありがとうございます、案１が最も簡単なので良さそうです。
質問画面では親のクラス名に parts を入れて作成したのですが、回答画面では含めずに考えました。
元々 Goo 質問のクラス名を参考に作成しており、回答画面は SEO を意識してクラス名を付けられていなかったので同じものに変更しても問題ないと思っております。
function validation() {} も responce.js にまとめてみました、その他のコードでまとめられる所はありますでしょうか？

※ 最新コード
https://github.com/i6Grja3R/sample_theme.git

回答No.10

dell_OK

・削除したところ入力画面に戻れなくなってしまいました…

それは input_area を Input_area にしたからではないでしょうか。
input_area がないというエラーになっています。
以前 Input_area を input_area にされたのはなぜでしょうか。
bbs_quest_input.php と合わせる意味もあるので input_area にしておいてください。

・response.js に下記コードを追加する必要はないのでしょうか？

必要ありません。
validation_text() は共通関数になったのでひとつです。

・キャッシュクリアしてみたところエラーが解消されました。

スクリプトを外部ファイルに持たせるとこのような弊害がおこります。
開発中はスクリプトの変更をするたびにキャッシュを削除してください。
一般公開後もスクリプトを変更するとユーザー側で誤動作になることがあるので注意です。

・i == 0 だとどうしても不具合のようなもので表示されません…
i == 4 にしたところ表示されるためどうすべきか悩んでおります…

なぜ 4 で表示されるのかはわかりませんが、
おそらくアップロードファイルのところに表示されているのではないでしょうかね。
表示サイズが違うと思います。
表示されない理由は、
作成したユーザーアイコン要素を追加する処理がコメントになっているからです。
－－－－
// divNamePartialParts.appendChild(usericonImg);
－－－－
コメント解除すると私の方では表示されました。

補足

Q.input_area がないというエラーになっています。
以前 Input_area を input_area にされたのはなぜでしょうか。
bbs_quest_input.php と合わせる意味もあるので input_area にしておいてください。

A.回答ありがとうございます、下のクラス (answer_Input_form ) に合わせる形で全角英文字にしていたのですが、bbs_quest_input.php と合わせるために input_area に戻していたのを忘れておりました申し訳ありません。

Q.スクリプトを外部ファイルに持たせるとこのような弊害がおこります。
開発中はスクリプトの変更をするたびにキャッシュを削除してください。
一般公開後もスクリプトを変更するとユーザー側で誤動作になることがあるので注意です。

A.アドバイスありがとうございます、勉強になりました。
以後気を付けておきます。

Q.なぜ 4 で表示されるのかはわかりませんが、
おそらくアップロードファイルのところに表示されているのではないでしょうかね。
表示サイズが違うと思います。
表示されない理由は、
作成したユーザーアイコン要素を追加する処理がコメントになっているからです。
－－－－
// divNamePartialParts.appendChild(usericonImg);
－－－－
コメント解除すると私の方では表示されました。

A.修正ありがとうございます。
dell_ok さんが言われた通りアップロードファイルで表示されていたようです。

※ 最新コード
https://github.com/i6Grja3R/sample_theme.git

response.js に共通処理は全て書き終わったということで良いでしょうか？
bbs_que_answer.php の180行目から /* バリデーション条件判断部分 */ もまとめられる気がしております。
function validation_text(parts) {} と function validation_text(contents) {} で関数名が異なるのに何故共通処理として書けるのかお聞きしたいです。

➀要素を作成する処理は共通処理として response.js に書く
➁その要素を配置する処理を回答画面に直接書く

回答No.9

dell_OK

・function validation_text(parts) {} を bbs_quest_input.php から削除して functions.php に書くという事でしょうか？
実行したところ次の後文で console にエラーが出ておりこちらも同時に移動する必要がありそうです。

bbs_que_answer.php からも削除してください。
動作確認は質問画面と回答画面の両方でおこなってください。
共通化しようとしているので、片方で動いてももう片方で動かないことがありますので。

・上記とは別に Uncaught SyntaxError: Unexpected token '<' というエラーが表示されているのですが、調べても意味が分かりませんでした。

上記のエラーもこのエラーも質問者さまのサイトでは発生していないようですね。
ローカル環境でエラーになったのでしょうか。
私のローカル環境ではそのエラーにはなっていません。
キャッシュが残っていて、新しい response.js が読み込まれていないのかもしれないですね。
キャッシュをクリアして試してみてください。

・response.js の script タグを削除した場合別途コードが必要なのでしょうか…？

必要ありません。

補足

Q.bbs_que_answer.php からも削除してください。
動作確認は質問画面と回答画面の両方でおこなってください。
共通化しようとしているので、片方で動いてももう片方で動かないことがありますので。

A.回答ありがとうございます、削除したところ入力画面に戻れなくなってしまいました…
response.js に下記コードを追加する必要はないのでしょうか？

function validation_text(contents) {
/* このcontentsグループの、inputを抽出 */
let text = contents.getElementsByClassName('input')[0];
/* 最小チェック */
if (text.value.length < text.dataset.minlength) {
return false;
}
/* 最大チェック */
if (text.value.length > text.dataset.length) {
return false;
}
return true;
};

※ 最新コード
https://github.com/i6Grja3R/sample_theme.git

Q.キャッシュが残っていて、新しい response.js が読み込まれていないのかもしれないですね。
キャッシュをクリアして試してみてください。

A.回答ありがとうございます、キャッシュクリアしてみたところエラーが解消されました。

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

アイコン画像がまた表示されなくなってしまい原因を探るために旧コードにも戻してみたのですが、i == 0 だとどうしても不具合のようなもので表示されません…
i == 4 にしたところ表示されるためどうすべきか悩んでおります…
アドバイスお願い致します。

※ 表示されているエラー文
Failed to load resource: the server responded with a status of 404 ()

※ 現在のコード
const set_attach_image = function(i) {
//HTML要素の中身を変更するときに使われるプロパティ
if (i == 0) {
maxsize = 5;
height = "85px";
width = "85px";
} else {
maxsize = 15;
height = "350px";
width = "530px";
}

for (let i = 0; i < blobType.length; i++) {
if (i == 0) {
usericonImg = document.createElement("img");
usericonImg.style.maxHeight = "85px";
usericonImg.style.maxWidth = "85px";
if (blobType[i] == "") {
usericonImg.src = "<?php echo $noimage_url; ?>";
} else {
usericonImg.src = blobUrl[i];
}
}

回答No.8

dell_OK

最新コードはPHPエラーになりました。
質問者さまのサイトではPHPエラーにはなっていないようですが、
functions.php の最後の行の後ろに全角スペースがあるのでなくしておいてください。
－－－－
add_action('wp_enqueue_scripts', 'my_scripts_method');　
－－－－

「確認画面へ進む」ボタンの使用可不可が動作していないようですね。
コンソールでエラーが確認できるので見ておいてください。
エラー箇所は validation_submit(submit); です。
原因はスクリプトファイルの script タグです。
スクリプトファイルには script タグは書きませんのでなくしておいてください。

動作確認ができたら、同じようにこちらも引っ越しして動作確認してみてください。
－－－－
function validation_text(parts) {}
－－－－
bbs_quest_input.php の引数は parts で、
bbs_que_answer.php の引数は contents なので、
まったく同じと言うわけではありませんが、
この引数に対しての処理内容がまったく同じなので、
共通して使える関数になっています。

補足

回答ありがとうございます、console で確認するのを忘れておりました申し訳ないです。
function validation_text(parts) {} を bbs_quest_input.php から削除して functions.php に書くという事でしょうか？
実行したところ次の後文で console にエラーが出ておりこちらも同時に移動する必要がありそうです。

※ エラー文
Uncaught ReferenceError: validation_text is not defined
at validation (質問掲示板/:296:13)
at init (質問掲示板/:448:9)

※ 最新コード
https://github.com/i6Grja3R/sample_theme.git

上記とは別に Uncaught SyntaxError: Unexpected token '<' というエラーが表示されているのですが、調べても意味が分かりませんでした。
response.js の script タグを削除した場合別途コードが必要なのでしょうか…？

アドバイスよろしくお願い致します。