Javascript で条件分岐を使い共通コードをまとめる方法が分かりません

質問画面と回答画面の2つのファイルでQ＆A掲示板を作成しています。
どちらも非同期通信（HTMLの書き換え）を行い、goo質問のように入力→確認→送信という形で設計しております。
コード短縮、実装順番の変更のために response.js にコードをまとめているのですが、確認送信ボタンのみ質問画面か回答画面を if で条件分岐する必要があるため、コードの書き方が分かりません。

ファイルアップロードの引数の値が質問と回答で異なるので、そこを利用して分岐したいと考えているのですが、どのように判定させればよいのでしょうか？

/* 質問＆回答画面の確認送信ボタン */
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 を追加

/* ファイルアップロード（質問画面） */
const usericonImg = document.createElement("img");
const image_area = create_image_parts("image-partial", 3, usericonImg);

/* ファイルアップロード（回答画面）*/
const usericonImg = document.createElement("img");
const image_area = create_image_parts("uploadfile-area", 0, usericonImg);


/* ファイルアップロード（response.js） */
function create_image_parts(image_class, usericonIndex, usericonImg) {
const image_area = document.createElement("div");
// const comment_area = document.createElement("div");
var image_count = 0;
const divImagePartial = document.createElement("div"); // div (子)を生成
divImagePartial.classList.add(image_class); // classの追加
// var usericonImg;
for (let i = 0; i < blobType.length; i++) {
if (i == usericonIndex) {
// 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];
}
} else {
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) {
image_count++;
changeImg.classList.add("changeImg");
changeImg.style.height = "350px";
changeImg.style.width = "530px";
changeImg.src = blobUrl[i];
const divImageCameraIcon = document.createElement("div"); // div (孫)を生成
divImageCameraIcon.classList.add("image-camera-icon"); // classの追加
divImageCameraIcon.appendChild(changeImg); // image_camera_icon (子要素) の末尾に changeImg を追加
divImagePartial.appendChild(divImageCameraIcon); // uploadfile_area (親要素) の末尾に image_camera_icon を追加
}
}
}
image_area.appendChild(divImagePartial); // image_area (親要素) の末尾に div を追加
return image_area;
}

No.1 ベストアンサー 回答者： otasuke3900z 回答日時： 2024/11/23 00:18

https://www.perplexity.ai/search/zhi-wen-hua-mia …

Java script詳しくないのですが、Perplexityでコードを出力してみました。

( ﾟДﾟ)y─┛~~　

わからないところは微調整してくれるので、
こちらを使うと便利ですよ。

以上、参考になれば幸いです。

====================

質問画面と回答画面の非同期通信を行うQ&A掲示板の実装において、
確認送信ボタンの処理を条件分岐させる方法について説明します。

ファイルアップロードの引数の値を利用して、
質問と回答を判定するためのコード例を以下に示します。

条件分岐の実装
まず、質問画面と回答画面を識別するために、
特定の属性や変数を使用します。例えば、ボタンがクリックされた際に、
どちらの画面からの操作かを判定するために、
data属性やグローバル変数を使う方法があります。

1. HTMLボタンにデータ属性を追加
javascript
// 質問画面用ボタン
child.setAttribute("data-type", "question");

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

2. ボタンクリック時の処理
次に、ボタンがクリックされた際に、
そのdata-type属性を参照して条件分岐を行います。
javascript
child.addEventListener("click", () => {
const buttonType = child.getAttribute("data-type");

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

3. 処理関数の定義
それぞれの処理関数を定義します。
ここでは簡単な例として、コンソールログで確認していますが、
実際には非同期通信やデータ送信処理を行います。
javascript
function handleQuestionSubmission() {
console.log("質問が送信されました。");
// ここに質問送信処理を書く
}

function handleAnswerSubmission() {
console.log("回答が送信されました。");
// ここに回答送信処理を書く
}

ファイルアップロードの引数による判定
ファイルアップロード時に異なる引数を利用して画面を判定する場合、
以下のような方法も考えられます。

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

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

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

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

このようにして、ボタンのクリックイベントや
ファイルアップロード時に条件分岐を行うことで、
それぞれの画面で異なる処理を実装できます。

この回答へのお礼

回答ありがとうございます。
前後のコードを提示していなかったので、新規で関数を作成されたんですね。
既存のコードを使って、コードをまとめてみました。

const set_attach_event = function (fileAreaSelector, usericonIndex) {
/* カメラ画像をファイルアップロード時に非表示にする */
/* 省略 */
/* カメラ画像をファイルアップロード時に非表示にする */
const attach = document.querySelectorAll('.attach');
const clear = document.querySelectorAll('.attachclear');
const viewer = document.querySelectorAll('.viewer');
const changeImg = document.querySelectorAll('.changeImg'); // 入力されたら消す画像
const fileArea = document.querySelectorAll(fileAreaSelector);
const set_attach_image = function (i) {
//HTML要素の中身を変更するときに使われるプロパティ
if (i == usericonIndex) {
maxsize = 5;
height = "85px";
width = "85px";
} else {
maxsize = 15;
height = "350px";
width = "530px";
}
}

const divPostButton = create_button_parts(2);

お礼日時：2024/11/29 21:47