WordPressの質問（q1023581）の続

質問

回答が遅くなってしまい申し訳ありません…
確認画面で分からないところがあり、アドバイスお願い致します。

➀アップロードされたファイルを表示画面と同じ大きさ（height: 350px;　width: 528px;）で表示したい場合どうすれば良いでしょうか？
HTML を書き換えるコードの画像サイズを変更しても変化がないためどうすべきか悩んでおります。

➁名前と画像アイコンの表示順を逆にしたいのですが、bbs_quest_input.php の452行目の divNamaePartialParts.appendChild(usericonImg); と 455行目の divNamaePartialParts.appendChild(child); コードで順番を変更させる方法が分からず教えて頂きたいです。

上記とは別の疑問になるのですが、質問文、質問タイトル、名前それぞれ残り1文字入力可能な状態で制限がかかってしまいます。
これは以内というコードになっているからでしょうか？何が原因となっているのか分からずアドバイス頂きたいです。

※現在のコード
https://wandbox.org/permlink/piR82q0rnnWvVphI

※確認ページ表示画面
https://imgur.com/AucGqLf.png

※質問掲示板
http://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e6%8e%b2%e7%a4%ba%e6%9d%bf/

回答No.23

dell_OK · ベストアンサー

確認画面と結果画面の表示内容が同じなら、
ＳＴＥＰを完了にして、ボタンを非表示にする方法もあります。
要素を生成する必要もないのでコードもすっきりします。
－－－－
const confirm_button_click = function() {
const formData = new FormData();
formData.append("action", "bbs_quest_confirm");
const opt = {
method: "post",
body: formData
}
fetch("<?php echo home_url('wp-admin/admin-ajax.php'); ?>", opt)
.then(response => {
return response.json();
})
.then(json => {
if (json.error != "") {
alert(json.error);
return;
}
change3();
const buttons = document.querySelectorAll('.post-button');
buttons.forEach(x => x.style.display = "none");
})
.catch(error => {
console.log(error);
});
}
－－－－

お礼

回答が遅れてしまい申し訳ありません、こちらが最新の質問になります。
質問入力画面に画像をアップロードした場合と動画をアップロードした場合で大きさが変わってしまうのですが、統一することは可能でしょうか？

こちらは以前 dell_ok さんにお聞きした覚えがあり難しいとアドバイスを頂いた記憶があるのですが…
質問入力画面にファイルをアップロードする場合クリックして選択する方法だけでなくドラッグ＆ドロップも追加することは可能でしょうか？

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

補足

アドバイスありがとうございます、この方法が良さそうですね。
完了画面はこれで完成ということで、質問一覧表示画面と回答者が見るページを作成する予定です。

回答No.22

dell_OK

以下のコードがなくなっています。
どのタイミングでなくなったのかわかりませんが、
適切な箇所にこれが複数必要ですし、
　result_area.appendChild(～); // result_area の末尾に div を追加
これが最後に必要です。
　confirm_area.style.display = "none";

お礼

こちらが最新の質問になります。
質問の回答期限が切れてしまい、下記リンクからアドバイスよろしくお願い致します。

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

補足

回答ありがとうございます、bbs_quest_input.phpの600,601行目にアドバイス頂いたコードを追加してみたのですが画面が進行せず原因が分からない状態です…

result_area.appendChild(～);はボタンがないため1か所のみ追加しております。
1点お聞きしたいのですが確認画面でconst 宣言を行ったものは完了画面では宣言する必要はないのでしょうか？

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

回答No.21

dell_OK

とはいっても、画像は関係ないかもしれないですね。
よくみたら
</script>のところでもエラーになっているような感じです。

回答No.20

dell_OK

開発モードでみていただけましたか。
ほかに、
https://www.gsdfgsdgs.cfbx.jp/wp-content/uploads/2022/07/1-19.jpg
がないようです。

補足

アドバイスありがとうございます、修正いたしました。

回答No.19

dell_OK

・エラーを取得する必要があると思われるのですが、どこから取得すればいいのでしょうか？

開発モードで見てください。
ここでエラーになっているようです。
step03.pngの画像ファイルがないか、ＵＲＬが間違っているかだと思います。
－－－－
step_img.src = "http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/step03.png";
－－－－

補足

アドバイスありがとうございます。
仮の画像を設定してみたのですが、結果画面へ進むボタンが機能せず別の箇所に問題があるようです…

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

回答No.18

dell_OK

・原因を調べるためにエラーを表示したいのですが functions.php の169行目のコードをどのように変更すれば良いでしょうか？

試していませんが、$wpdb->last_errorを追加してみてください。
－－－－変更前
$result['error'] = '登録できませんでした';
－－－－変更後
$result['error'] = '登録できませんでした'.$wpdb->last_error;
－－－－

補足

アドバイスありがとうございます、追加したところ question と title のカラムがないとエラーが表示されたため追加してみたのですが、結果画面へ進むボタンを押しても止まったままで何か問題が生じているようです。
エラーを取得する必要があると思われるのですが、どこから取得すればいいのでしょうか？

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

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

回答No.17

dell_OK

・何か原因として考えられるコードはありますでしょうか？

試していませんが、こうだと思います。
－－－－変更前
divBodyPartialParts.fontSize = "150%";
－－－－変更後
divBodyPartialParts.style.fontSize = "150%";
－－－－

補足

訂正ありがとうございます。修正したところCSSを設定することが出来ました。

回答No.16

dell_OK

間違えて投稿してしまいました。

どこで設定しているかはわかりましたが、
消えることなく表示されているように見えます。

補足

回答ありがとうございます。タイトルではCSSは設定できるのですが、コメントでCSSを書いた際に文字の大きさの指定コードのみ消えていて原因が分からず困っております…

.board_form_partial div#confirm_area .body-partial-parts {
background-color: #FCF2F4;
border: 2px solid #F7859C;
/* margin: 5px 0 20px 5px; */
/* padding: 10px; */
width: 98%;
font-weight: 700;
letter-spacing: 0.1em;
}

回答No.15

dell_OK

・何故文字の大きさのみCSSが消えてしまうのか原因は分かりますでしょうか？

文字の大きさをどこで指定しているのかわかりません。

お礼

こちらが最新の質問になります。
確認画面のコメントの文字の大きさを Javascript で調整できるのではないかと思いコードを書いてみたのですが反映されず、何か原因として考えられるコードはありますでしょうか？

※最新コード（bbs_quest_input.phpの430行目に追加いたしました）
https://wandbox.org/permlink/QEXufhK1NRoercLJ

上記とは別にお聞きしたいことがあるのですが、結果画面へ進むボタンを押したところ登録できませんでしたとダイアログに表示されてしまい結果画面を表示することができませんでした。
原因を調べるためにエラーを表示したいのですが functions.php の169行目のコードをどのように変更すれば良いでしょうか？

補足

回答ありがとうございます、説明不足で申し訳ありません。
bbs_quest_input.phpの494行目のコードで指定している CSSとHTMLは下記になります。

/* 雑談掲示板 確認画面コメント定義 */
.board_form_partial div#confirm_area .body-partial-parts {
background-color: #FCF2F4;
border: 2px solid #F7859C;
/* margin: 5px 0 20px 5px; */
/* padding: 10px; */
width: 98%;
   font-size: 150%;
font-weight: 700;
letter-spacing: 0.1em;
}

<div>
<div class="body-partial-parts"><p>コメントテストコメントテストコメントテストコメントテスコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストトコメントテストコメコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストントテスコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテスコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストトコメントテストストトコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテスコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストトコメントテストコメコメントテストコメントテストコメントテストコメントテストコ</p>
</div>
<div class="title-partial-parts"><p>タイトルテストタイトルテストタイトルテストタイトルテストタイトルテストタイトルテストタイトルテストタ</p>
</div>

回答No.14

dell_OK

・何故 Array.from(divImagePartial.children).forEach(x => x.style.float = "left"); は子要素を取得しているのでしょうか？

その子要素とは、ここで用意されている　divImageCameraIcon　です。
－－－－
const divImagePartial = document.createElement("div"); // div (子)を生成
（省略）
for (let i = 0; i < blobType.length; i++) {
（省略）
const divImageCameraIcon = document.createElement("div"); // div (孫)を生成
divImageCameraIcon.classList.add("image-camera-icon"); // classの追加
divImageCameraIcon.appendChild(changeImg); // image_camera_icon (子要素) の末尾に changeImg を追加
divImagePartial.appendChild(divImageCameraIcon); // image_partial (親要素) の末尾に image_camera_icon を追加
（省略）
}
（省略）
if (image_count == 3) {
Array.from(divImagePartial.children).forEach(x => x.style.float = "left");
－－－－

divImageCameraIcon　はこのfor()ループ内で定義した定数のためループの外では使えません。
そのため、ループの外で定義した親要素　divImagePartial　から、子要素を取得して処理しています。

お礼

回答が遅くなり申し訳ありません。
確認画面のメッセージの文字の大きさをCSSで指定したのですが、CSSが消えてしまいます。
何故文字の大きさのみCSSが消えてしまうのか原因は分かりますでしょうか？

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

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

補足

Q.divImageCameraIcon　はこのfor()ループ内で定義した定数のためループの外では使えません。
そのため、ループの外で定義した親要素　divImagePartial　から、子要素を取得して処理しています。

A.解説ありがとうございます、for()ループ内で定義しているからなのですね。
勉強になりました覚えておきます。

回答No.13

dell_OK

・divImagePartial に float: left; を設定したい場合は下記のようなコードになるのでしょうか？

いいえ、これだけです。
－－－－
divImagePartial.style.float = "left";
－－－－

ただひとつのものに対して処理するのでforEach()は不要です。
配列にする必要もないので、Array.from()も不要です。

補足

Q.ただひとつのものに対して処理するのでforEach()は不要です。
配列にする必要もないので、Array.from()も不要です。

A.アドバイスありがとうございます。コードを修正したところ想像していた通りに表示することが出来ました。
1つ疑問なのですが、何故 Array.from(divImagePartial.children).forEach(x => x.style.float = "left"); は子要素を取得しているのでしょうか？
画像が1、2の場合は直接書いているため違いが気になりました。

※修正コード
if (image_count == 3) {
Array.from(divImagePartial.children).forEach(x => x.style.float = "left");
} else {
divImagePartial.style.float = "left";
}

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