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

dell_OK

・確認画面送信ボタンの if 分岐コードが分からず調べて質問をしてみたのですが、想像全く違うコードになってしまうため困惑しております。

ひとまず、確認画面送信ボタン要素作成のコードを response.js に引っ越しして関数を作ってみてください。
その関数の引数はひとつです。
画面の種類を示すものなので formType にでもしましょうか。
1 なら質問画面、2 なら回答画面ということにしましょう。
それで呼ぶ側と関数側の処理を書いてみてください。

回答No.26

dell_OK

引数を追加してください。
function create_image_parts(image_class, usericonIndex, usericonImg) {
この関数にこの処理は不要です。
const comment_area = document.createElement("div");

補足

Q.プロパティがないエラーだと思います。
原因は前回の私の回答に誤りがあったことに関係しています。
訂正します。

A.回答ありがとうございます。
修正してみたところ別のエラーが発生した為、原因を探しております…

※ エラー文
ReferenceError: usericonImg is not defined
at create_image_parts (response.js?ver=6.6.2:95:13)
at 質問回答画面/:400:36

Q.そこではありません。
回答No.23の後半「変更前の３行目は関数へ引っ越しです。」からをご覧ください。
関数の return の位置と内容、および、その直前の処理です。

A.回答ありがとうございます、申し訳ありませんご指摘いただいた内容を読んだところ理解出来ました。

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

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

確認画面送信ボタンの if 分岐コードが分からず調べて質問をしてみたのですが、想像全く違うコードになってしまうため困惑しております。

HTMLボタンにデータ属性を追加してボタンがクリックされた際に、そのdata-type属性を参照して条件分岐を行う方法があるようですが、質問画面用の処理と回答画面用の処理の両方を response.js に書くためコードがかなり長くなりそうです。
dell_ok さんに教えて頂いた引数を渡してそれぞれ違うコードを探してそれを比較するというのを完全に無視したコードになってしまうため悩んでおります…
アドバイスお願い致します。

※ アドバイス頂いたコード

1. HTMLボタンにデータ属性を追加

// 質問画面用ボタン
child.setAttribute("data-type", "question");

// 回答画面用ボタン
child.setAttribute("data-type", "answer");

2. ボタンクリック時の処理
ボタンがクリックされた際に、data-type属性を参照して条件分岐を行います。（コードが長くなりそうです）

child.addEventListener("click", () => {
const buttonType = child.getAttribute("data-type");

if (buttonType === "question") {
// 質問画面用の処理
handleQuestionSubmission();
} else if (buttonType === "answer") {
// 回答画面用の処理
handleAnswerSubmission();
}
});

3. ファイルアップロードの引数による判定
引数から情報を取得してファイルアップロード関数内で引数を受け取り、その内容によって判定します。

function create_image_parts(image_class, usericonIndex, usericonImg, isQuestion) {
if (isQuestion) {
// 質問用の処理
} else {
// 回答用の処理
}
}

4. 呼び出し時に引数を渡す
質問画面または回答画面からこの関数を呼び出す際に、適切なフラグ（true または false）を渡します。

const image_area = create_image_parts("image-partial", 3, usericonImg, true); // 質問の場合
const image_area = create_image_parts("uploadfile-area", 0, usericonImg, false); // 回答の場合

回答No.25

dell_OK

・要素が存在しないというエラーが発生しており

プロパティがないエラーだと思います。
原因は前回の私の回答に誤りがあったことに関係しています。
訂正します。
～～～～誤
引数を追加したのと、以下の２行をなくしました。
var image_count = 0;
usericonImg = document.createElement("img");
～～～～正
引数を追加したのと、以下の２行をなくしました。
var usericonImg;
usericonImg = document.createElement("img");
～～～～

・const image_area = document.createElement("div"); をコメントアウトするだけでよいのでしょうか？

そこではありません。
回答No.23の後半「変更前の３行目は関数へ引っ越しです。」からをご覧ください。
関数の return の位置と内容、および、その直前の処理です。

・bbs_quest_input.php （質問画面）は下記コードで問題ないでしょうか？

問題ありません。

補足

Q.プロパティがないエラーだと思います。
原因は前回の私の回答に誤りがあったことに関係しています。
訂正します。

A.回答ありがとうございます。
修正してみたところ別のエラーが発生した為、原因を探しております…

※ エラー文
ReferenceError: usericonImg is not defined
at create_image_parts (response.js?ver=6.6.2:95:13)
at 質問回答画面/:400:36

Q.そこではありません。
回答No.23の後半「変更前の３行目は関数へ引っ越しです。」からをご覧ください。
関数の return の位置と内容、および、その直前の処理です。

A.回答ありがとうございます、申し訳ありませんご指摘いただいた内容を読んだところ理解出来ました。

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

回答No.24

dell_OK

・引数を渡して判断するという意味がよく分からないのですが、下記コードのようにそれぞれ違うコードを探してそれを比較するのでしょうか？

そうです。

・const divImagePartial を const image_area に変更するんですね

response.js の create_image_parts() の方も修正しておいてくださいね。

・➀ ReferenceError: usericonImg is not defined

これは面倒ですね。
この方法がいいのかわかりませんが、
直接外部変数は使いたくないので、
関数外で定義して引数で渡し、
関数内で加工することにしてみましょう。

呼ぶ側はこうです。
usericonImg の定義と、それを引数で渡します。
－－－－
/* ファイルアップロード要素作成 */
const usericonImg = document.createElement("img");
const image_area = create_image_parts("uploadfile-area", 0, usericonImg);
－－－－

関数側はこうです。
－－－－
/* ファイルアップロード要素作成 */
function create_image_parts(image_class, usericonIndex, usericonImg) {
const image_area = document.createElement("div");
var image_count = 0;
const divImagePartial = document.createElement("div"); // div (子)を生成
divImagePartial.classList.add(image_class); // classの追加
for (let i = 0; i < blobType.length; i++) {
if (i == usericonIndex) {
usericonImg.style.maxHeight = "85px";
－－－－
引数を追加したのと、以下の２行をなくしました。
var image_count = 0;
usericonImg = document.createElement("img");

・➁ ReferenceError: comment_area is not defined

ファイルアップロード要素作成を引っ越した時（update45）に、
この行がなくなったようなので戻しておいてください。
－－－－
const comment_area = document.createElement("div");
－－－－

補足

Q.引数を渡して判断するという意味がよく分からないのですが、下記コードのようにそれぞれ違うコードを探してそれを比較するのでしょうか？

A.回答ありがとうございます、変数定義で迷っていたところ dell_ok さんに関数外で定義して引数で渡す方法を教えて頂き、そちらの方法で考えていたのですが要素が存在しないというエラーが発生しており、問題を解決してからになりそうです…

・const divImagePartial を const image_area に変更するんですね

Q.response.js の create_image_parts() の方も修正しておいてくださいね。

A.回答ありがとうございます、const image_area = document.createElement("div"); をコメントアウトするだけでよいのでしょうか？

Q.これは面倒ですね。
この方法がいいのかわかりませんが、
直接外部変数は使いたくないので、
関数外で定義して引数で渡し、
関数内で加工することにしてみましょう。

A.アドバイスありがとうございます、bbs_quest_input.php （質問画面）は下記コードで問題ないでしょうか？

/* ファイルアップロード要素作成 */
const usericonImg = document.createElement("img");
const image_area = create_image_parts("image-partial", 3, usericonImg);

Q.ファイルアップロード要素作成を引っ越した時（update45）に、
この行がなくなったようなので戻しておいてください。
－－－－
const comment_area = document.createElement("div");
－－－－

A.回答ありがとうございます。
修正してみたのですが、要素が存在しないと表示されてしまいます…
どうすればよいでしょうか？アドバイスお願い致します。

※ エラー文
TypeError: Cannot read properties of undefined (reading 'style')
at create_image_parts (response.js?ver=6.6.2:95:25)
at 質問回答画面/:400:36

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

回答No.23

dell_OK

・ひとつめの child 生成のみ const ではなく let にするのは何故でしょうか？

こちらなどご覧ください。
https://techplay.jp/column/1619

・change1(); をどうすればよいのか分からないのですが

回答画面では"STEP1 入力"や"STEP2 確認"を表示しないのでしょうか。
表示するのでしたらこの処理を活かすといいです。
表示しないのでしたら処理中のページが質問画面か回答画面かを引数を渡して、その引数で判定するといいと思います。

・このように共通部分に含まれていても関数が未定義の場合どうすればよいでしょうか？

この場合は定義すれば解消されます。
－－－－変更前
/* ファイルアップロード要素作成 */
const divImagePartial = create_image_parts("image-partial", 3);
image_area.appendChild(divImagePartial); // image_area (親要素) の末尾に div を追加
－－－－変更後
/* ファイルアップロード要素作成 */
const image_area = create_image_parts("image-partial", 3);
－－－－

変更前の３行目は関数へ引っ越しです。
もとの流れでもこの位置にあります。
－－－－
divImagePartial.appendChild(divImageCameraIcon); // uploadfile_area (親要素) の末尾に image_camera_icon を追加
}
}
}
image_area.appendChild(divImagePartial); // image_area (親要素) の末尾に div を追加
return image_area;
}
－－－－

image_area を return します。

補足

Q.ひとつめの child 生成のみ const ではなく let にするのは何故でしょうか？

A.回答ありがとうございます、再代入可能なように let にするということで理解致しました。

Q.回答画面では"STEP1 入力"や"STEP2 確認"を表示しないのでしょうか。
表示するのでしたらこの処理を活かすといいです。
表示しないのでしたら処理中のページが質問画面か回答画面かを引数を渡して、その引数で判定するといいと思います。

A.回答ありがとうございます、表示しない方向で考えております。
引数を渡して判断するという意味がよく分からないのですが、下記コードのようにそれぞれ違うコードを探してそれを比較するのでしょうか？

const divImagePartial = create_image_parts("uploadfile-area", 0);
const divImagePartial = create_image_parts("image-partial", 3);

Q.このように共通部分に含まれていても関数が未定義の場合どうすればよいでしょうか？

この場合は定義すれば解消されます。
－－－－変更前
/* ファイルアップロード要素作成 */
const divImagePartial = create_image_parts("image-partial", 3);
image_area.appendChild(divImagePartial); // image_area (親要素) の末尾に div を追加
－－－－変更後
/* ファイルアップロード要素作成 */
const image_area = create_image_parts("image-partial", 3);
－－－－

A.アドバイスありがとうございます、const divImagePartial を const image_area に変更するんですね勉強になりました。

実行したところ下記の部分でエラーが発生しております。
それぞれコードを考えてみたのですが、恐らく間違っていると思われます… アドバイスお願い致します。

※ エラー文
➀ ReferenceError: usericonImg is not defined
at 質問回答画面/:405:95

➁ ReferenceError: comment_area is not defined
at 質問掲示板/:473:17

※ 考えたコード
➀ const usericonImg = create_name_parts("answer-name-area", name_value, usericonImg);

➁ const comment_area.appendChild(divBodyPartialParts);

※ 最新コード（update4となっていますが正確には47になります間違えてプッシュしてしまいました申し訳ありません。）
https://github.com/i6Grja3R/sample_theme.git

回答No.22

dell_OK

・/* 確認画面送信ボタン要素作成 */ ではどこまでを response.js に書くべきか分からずお聞きしたいです。

この範囲がよさそうです。
－－－－
/* 確認画面送信ボタン要素作成 */
const divPostButton = document.createElement("div"); // div (子)を生成
divPostButton.classList.add("post-button"); // classの追加
child = document.createElement("button"); // button (孫)を生成
child.type = "button";
child.innerText = "入力画面へ戻る";
child.addEventListener("click", () => {
change1();
input_area.style.display = "block";
// 空文字を入れることで要素内を空にできる
confirm_area.textContent = '';
confirm_area.style.display = "none";
});
divPostButton.appendChild(child); // div (子要素) の末尾に child を追加
child = document.createElement("button"); // button (孫)を生成
child.type = "button";
//name属性の追加・変更
child.setAttribute("name", "output");
child.innerText = "結果画面へ進む";
child.addEventListener("click", confirm_button_click);
divPostButton.appendChild(child); // div (子要素) の末尾に child を追加
－－－－

まったく同じではなさそうです。
change1();
をどうするか考える必要があります。

ひとつめの child 生成は const ではなく let にしてください。
let child = document.createElement("button"); // button (孫)を生成

ふたつめはそのままで前には何も書かないでください。

補足

A.回答ありがとうございます comment_area (親要素) の末尾に div を追加を目安にするんですね。
いくつか質問があるのですが、ひとつめの child 生成のみ const ではなく let にするのは何故でしょうか？
change1(); をどうすればよいのか分からないのですが…　アドバイスお願い致します。

回答No.21 のように修正したところ新たにエラーが発生しており、const image_area = document.createElement("div"); を response.js から消して bbs_quest_input.php と bbs_quest_input.php に書くべきか悩んでおります。
このように共通部分に含まれていても関数が未定義の場合どうすればよいでしょうか？

※ エラー文
ReferenceError: image_area is not defined
at 質問回答画面/:400:17

ReferenceError: image_area is not defined
at 質問掲示板/:470:17

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

回答No.21

dell_OK

・回答画面のみエラーが表示されてしまいます。

質問画面も同じエラーが出ています。
出ていないとしたらキャッシュのせいかもしれませんね。
どちらの画面を見るときもキャッシュはクリアしてください。
と言うか、開発中は常にキャッシュをクリアするのが無難です。

エラーは未定義の変数 usericonIndex を使っているからです。
－－－－
const divImagePartial = create_image_parts("image-partial", usericonIndex);
－－－－
これは関数側で受け取るための引数名 usericonIndex です。
関数を呼ぶ側は値を渡します。

質問画面（bbs_quest_input.php）では、
if (i == 3) { として動作させたいのですから 3 を引数として渡します。
const divImagePartial = create_image_parts("image-partial", 3);
すると、
if (i == usericonIndex) {
が、
if (i == 3) {
として動作することになります。

回答画面は 0 を渡します。
const divImagePartial = create_image_parts("uploadfile-area", 0);

補足

A.回答ありがとうございます、Gogle拡張機能の clear cache を使っていたので正確ではなかったかもしれません、純正な方法でキャッシュクリアしてみます。
数字も引数として渡せるんですね勉強になりました覚えておきます。

回答No.20

dell_OK

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

どの部分でしょうか。
全て同じで外部変数を使っていなければそのまま引っ越しでいいと思います。

補足

回答ありがとうございます。
○○○.appendChild(); というコードを目安に dell_ok さんにアドバイス頂いたコードを元に考えていたのですが、/* 確認画面送信ボタン要素作成 */ ではどこまでを response.js に書くべきか分からずお聞きしたいです。

回答No.19

dell_OK

・➀ i の値がそれぞれ異なるコードをどうまとめればよいでしょうか？

異なる部分を引数で渡すのが簡単です。
if (i == 3) {
if (i == 0) {

3 と 0 が異なるのでここで引数を使います。
この数値はユーザーアイコンの画像ファイルの要素インデックスですからこんな名前で。
－－－－
function ～ (usericonIndex){
～
if (i == usericonIndex) {
～
}
－－－－

補足

アドバイスありがとうございます。
アップロードファイルについてまとめてみたのですが、回答画面のみエラーが表示されてしまいます。
原因は分かりますでしょうか？
response.js に共通部分を書いてみたのですが間違えがあるかもしれません… 確認宜しくお願い致します。

※ エラー文
ReferenceError: usericonIndex is not defined
at 質問回答画面/:399:79

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

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

回答No.18

dell_OK

・const divBodyPartialParts = create_text_parts("answer-text-area", text_value); で宣言されているので原因が分かりません。

説明し忘れていました。
create_name_parts() では生成した divNamePartialParts を return しています。

同じように return してみてください。
ついでに child の生成に const を追加しておいてください。
－－－－
/* コメント要素作成 */
function create_text_parts(text_class, text_value) {
const divBodyPartialParts = document.createElement("div"); // div (子)を生成
divBodyPartialParts.classList.add(text_class); // classの追加
const child = document.createElement("p"); // p (孫)を生成
child.appendChild(document.createTextNode(text_value)); //孫要素として Text ノードを生成
divBodyPartialParts.appendChild(child); // div (子要素) の末尾に child を追加
divBodyPartialParts.style.fontSize = "150%"; //コメントの文字のサイズ
return divBodyPartialParts;
}
－－－－

共通で使うわけではありませんが、
タイトルについても、
本体側のコードをすっきりさせる目的もあるので、
要素生成関数として引っ越しするといいと思います。

補足

Q.create_name_parts() では生成した divNamePartialParts を return しています。

同じように return してみてください。
ついでに child の生成に const を追加しておいてください。

共通で使うわけではありませんが、
タイトルについても、
本体側のコードをすっきりさせる目的もあるので、
要素生成関数として引っ越しするといいと思います。

A.回答ありがとうございます、最後に return するのを読み落としておりました申し訳ありません。
タイトルもまとめてみました確認お願い致します。

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

bbs_que_answer.php のコメントを修正したところアイコン画像要素作成部分にエラーが出ていた為、child = document.createElement("p"); を追加したのですが問題ないでしょうか？

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