WordPressの質問（q10288298）の続

質問

VSCodeで作成したコードをGitHubにアップロードするにはコンテキストメニューを別途追加する方法以外にありますでしょうか？

回答No.23

dell_OK · ベストアンサー

・質問画面のアイコン画像に関するコードを見たのですがどこに存在しているのか見つけらませんでした。

先に言っておけばよかったのですが、共通化のことも考えると変数名は変更しない方がよかったです。
質問画面と回答画面ではスタイル（class）を変えたいのでしたら、
　.classList.add("～")
の ～ を変えるだけでよかったのです。

それと、せっかくコメント書くのでしたら、例えば、
/* ユーザーアイコン要素作成 */
/* ユーザーアイコン要素追加 */
のような行をそれぞれの処理の前に入れておくと見つけやすかったかと思います。

ユーザーアイコンを追加しているのはここです。
名前の処理のところにあるようです。
divAnswerNameArea.appendChild(usericonImg);

質問画面のコードではここですね。
divNamePartialParts.appendChild(usericonImg);

どちらも usericonImg を作成している処理はいまのところ同じようですが、他のアップロードファイルと順番が違っていたりするので、そのあたりを調整すれば動くかも知れません。

お礼

こちらが最新の質問になります。
dell_ok さんが言われたように .appendChild(child) に問題があったようです申し訳ありません。
child = document.createElement("p"); で定義していないからエラーが起きたんですね。
アイコン画像の HTML について再度考えたところ名前やコメントと違い文字を出力する必要がなく上記のコードはコメントアウトしております。

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

※最新コード
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/

補足

Q.エラーの個所はここです。
const comment_area = document.createElement("div"); // const image_area の下から移動
const divUserArea = document.createElement("div"); // div (子)を生成
divUserArea.classList.add("user-area"); // classの追加
ここ divUserArea.appendChild(child); // div (子要素) の末尾に child を追加
comment_area.appendChild(divUserArea); // comment_area (親要素) の末尾に div を追加

この時点で child の準備がされていません。

A.回答ありがとうございます、回答No.22についての補足が1つずれてしまいました申し訳ありません。
.appendChild(child) についてエラー原因ではないかと少し考えていたのですが、上記のコードではなく別の箇所になります。

HTML の書き換えに関する .appendChild(child) では var child; と関数宣言を行っているため問題なさそうです。

appendChild() でコードを調べると HTML の書き換えに関するコード以外で viewer[i].appendChild(child); というコードがあり、こちらの child が空ということではないかと思うのですが、どうすればよいでしょうか？

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

dell_ok さんがおっしゃるように共通化のことを考えて変数名は変更しない形で another_que_answer.php に別途修正したコードを書いてみました。
確認よろしくお願い致します。

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

回答No.22

dell_OK

エラーの個所はここです。
const comment_area = document.createElement("div"); // const image_area の下から移動
const divUserArea = document.createElement("div"); // div (子)を生成
divUserArea.classList.add("user-area"); // classの追加
ここ divUserArea.appendChild(child); // div (子要素) の末尾に child を追加
comment_area.appendChild(divUserArea); // comment_area (親要素) の末尾に div を追加

この時点で child の準備がされていません。
この divUserArea にどのような要素を追加されるのでしょうか。

先日、divUserArea の定義が重複していてエラーになっていましたね。
それで片方を divUploadfileArea に変更されましたね。
git コミット update11 で変更もれを直されたようですね。
まだ divUserArea のままのところが残っていますが、divUserArea は必要なのでしょうか。

お礼

こちらが最新の回答になります。 質問の締め切りを間違って押してしまっていたようで気が付きませんでした… 本当に申し訳ありません。 ※最新の質問 https://okwave.jp/qa/q10306916.html

Powered by GRATICA

補足

回答ありがとうございます、アイコン画像を表示する際に使用するクラスになるので必要になります。

<div>
<div class="user-area">
<div class="user-icon">
<img src="<?php echo $noimage_url; ?>" class="changeImg" style="height:90px;width:90px">
</div>
</div>
</div>

回答No.21

dell_OK

・確認画面へ進むボタンを押した際に undefined と表示されております。

私の環境では再現できなくて、別のエラーになっています。
GitHub の functions.php と bbs_que_answer.php は最新でしょうか。

補足

回答ありがとうございます、確認したところサイトの方の functions.php に修正不足がありました申し訳ありません。
実行したところ下記のエラーが発生していたので bbs_que_answer.php を再度見直してコードを修正してみたのですが解決できず悩んでおります…
エラー文を調べたところ存在しない要素を呼んでいるため null が返っているということだと思うのですが、appendChild はすべて const で関数の宣言を行っているかチェックしており原因不明です。

※表示されているエラー文
TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at 質問回答画面/:456:21

上記とは別の質問になるのですが、bbs_que_answer.php の408行目の回答機能でユーザーアイコンを表示する際の HTML 書き替えのコードをどのように書けばよいかアドバイスお願い致します。
質問画面のアイコン画像に関するコードを見たのですがどこに存在しているのか見つけらませんでした。

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

回答No.20

dell_OK

・名前と回答の入力可能な残り文字数を表示させるコードが機能しておらず原因が分かりません

名前は機能しているようです。

質問画面と比較して違いを確認してみてください。
質問画面
<textarea class="input" name="text" id="text" data-length="<?php echo MAX_LENGTH::TEXT; ?>" data-minlength="<?php echo MIN_LENGTH::TEXT; ?>" placeholder="荒らし行為や誹謗中傷や著作権の侵害はご遠慮ください"></textarea>
回答画面
<textarea class="input" name="text" id="question" data-length="<?php echo MAX_LENGTH::TEXT; ?>" data-minlength="<?php echo MIN_LENGTH::TEXT; ?>" placeholder="荒らし行為や誹謗中傷や著作権の侵害はご遠慮ください"></textarea>

違いはここですね。
id="text"
id="question"
以前 question は廃止したので違うコードをコピーされたようですね。

文字数判定の処理でIDを確認しているところはここです。
if (!['name', 'text'].includes(e.target.id)) return;
IDが不一致のため判定処理がされないのです。

補足

回答ありがとうございます。
確認不足で申し訳ありません、id="question" を修正し忘れておりました。

実行してみたところ以下のようなエラーがアラートに表示された為、タイトルとスタンプ画像を除いたコードを functions.php 84行目に修正後のキーを bbs_que_answer 362行目に追加しております。

・質問タイトルをご記入ください。・スタンプを選択してください。

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

タイトルとスタンプ画像についてのエラーは解消されたのですが、アイコン画像とアップロードファイルについてのアラートエラーが出ており原因が分かりません…

確認画面へ進むボタンを押した際に undefined と表示されております。アイコン画像のみ、アップロードファイルのみ、どちらも無しで進めた場合に全て同様のエラーが発生しているようです。

エラー原因を調べるためにファイルサイズが 15MB をオーバーしているものをアップロードしたところファイルサイズが 15MB バイトを超えていますと表示されたので、 bbs_que_answer 235行目の attach[i].files[0].size は機能していることが分かりました。

bbs_que_answer 315行目の if (typeof files[0] !== 'undefined') {} に問題が発生しているのではないかと思うのですが、前後のコードを見てもどこの値が空なのか想像がつきません…
アドバイスお願い致します。

回答No.19

dell_OK

最新コードの変更を確認しました。
ユーザーアイコンのビュアー（<div class="viewer" style="display: none;"></div>）まで label の中に含んでいるため、質問画面と異なる動作になります。
label の中に含むと、ドラッグ＆ドロップまたはファイル選択でビュアーに表示された画像をクリックするとファイル選択ダイアログボックスが表示されてしまいます。
質問画面ではクリックしても無反応です。

補足

アドバイスありがとうございます、ユーザーアイコンのビュアーの外に出すように修正してみます。
そのような違いがあるんですね…深く考えていなかったのですが覚えておきます。

回答No.18

dell_OK

・ドラッグ＆ドロップは出来るので

つまり、ユーザーアイコンをクリックした時に、ファイルを開くダイアログボックスが表示されない、ということでしょうか。
この時点ではアップロードではないので、表現には気を付けてくださいね。

ユーザーアイコンとファイル選択ボックス（input type="file）が関連づいていないせいですね。
<label>
<div class="user-icon">
<img src="<?php echo $noimage_url; ?>" class="changeImg" style="height:90px;width:90px">
</div>
</label>
<input type="file" class="attach" name="attach[]" data-maxsize="5" accept=".png, .jpg, .jpeg" style="display: none;">

質問画面のコードと違いを確認してみてください。
<label>
<div class="usericon-uploads">
<img src="<?php echo $noimage_url; ?>" class="changeImg" style="height:90px;width:90px">
</div>
<input type="file" class="attach" name="attach[]" data-maxsize="5" accept=".png, .jpg, .jpeg" style="display: none;">
</label>

ファイル選択ボックスが label の中に含まれています。

補足

解説ありがとうございます勉強になりました、アップロードではなくファイルを開くダイアログボックスが表示されないということで覚えておきます。

名前と回答の入力可能な残り文字数を表示させるコードが機能しておらず原因が分かりません…
<div class="parts"> を <div class="contents"> に変更したのでそれに合わせて Javascript も変更されているかチェックしたのですが問題なさそうです。

回答掲示板では質問掲示板と違いタイトルとスタンプを削除している為、functions.php のコードが原因ではないかと考えております。

回答掲示板に関する functions.php のコード全てを新たに書く場合、回答掲示板と質問掲示板のコードをまとめることが出来ないのですがどうすればよいでしょうか？

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

回答No.17

dell_OK

・画像の情報を取得出来ていないようです

どのような操作をしたらそれがわかりますか。

補足

回答ありがとうございます申し訳ありません、ファイルを開くことが出来なかったので画像が空になっているのではないかと考えておりました。

ドラッグ＆ドロップは出来るのでコードに間違いはないのではないかと思うのですが、どのようにエラー原因を探せばよいでしょうか…

※回答画面
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.16

dell_OK

・アイコン画像に画像をアップロードすることが出来ません

アップロードできないとはどんな状況でしょうか。

補足

回答ありがとうございます。
画像の情報を取得出来ていないようです…

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

回答No.15

dell_OK

エラー箇所、
fileArea[i].addEventListener('dragover', function(e) {
この fileArea[i] の配列の要素がひとつしかないため、
ふたつめ以降の処理をしようとしてエラーになっているようです。

配列を作成しているのはここ、
const fileArea = document.querySelectorAll('.image-camera-icon,.user-icon');
ですが、HTMLで準備しているカメラ画像のクラスはこうなっています。
<div class="uploadfile-camera-icon">
質問画面からは変更したクラスのようですね。
でしたら配列を作成するときのクラスを以下のようにしてください。
const fileArea = document.querySelectorAll('.uploadfile-camera-icon,.user-icon');

これでエラーはなくなると思います。

補足

修正ありがとうございます、エラーを解消することが出来ました。
配列の要素がひとつしかないというのが原因かもしれないのですが、アイコン画像に画像をアップロードすることが出来ません…アドバイスお願い致します。

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

回答No.14

dell_OK

・アイコン画像とアップロードファイルが機能しておらず悩んでおります。

アップロード以前に、画面を表示した時点で JavaScript にエラーがあるようです。
Uncaught SyntaxError: Identifier 'divUserArea' has already been declared (at 質問回答画面/:479:15)
divUserArea がすでにあるのに定義しようとしているエラーです。
「const divUserArea = 」が２箇所あるので、これが２つ必要なのかどうか考えてみてください。
１つでいいのでしたら１つはそれに関連するコードごと削除してください。
２つ必要ならどちらかの名前を変えてください。

補足

Q.アップロード以前に、画面を表示した時点で JavaScript にエラーがあるようです。
Uncaught SyntaxError: Identifier 'divUserArea' has already been declared (at 質問回答画面/:479:15)
divUserArea がすでにあるのに定義しようとしているエラーです。
「const divUserArea = 」が２箇所あるので、これが２つ必要なのかどうか考えてみてください。
２つ必要ならどちらかの名前を変えてください。

A.アドバイスありがとうございます。
Javascript のエラーは console の確認から入るのを忘れておりました申し訳ありません。
2つ目に重複して定義していた方の名前を変更したところエラーはなくなりました。

コードを反映させたところ上記エラーは解決されたのですが新たにエラーが表示されており原因が分かりませんアドバイスお願い致します。
addEventListener の要素がないことでエラーが発生しているのではないかと考え .addEventListener('', function () {}) のイベントについて入力画面と比較して確認し、修正してみたのですがエラーが改善されません…

※エラー文
Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')
at set_attach_event (質問回答画面/:343:19)
at init (質問回答画面/:369:5)

※回答画面イベント一覧
change、click、dragover、dragleave、drop、input

※修正内容
bbs_que_answer 14行目に外枠を追加
bbs_que_answer 171行目に <div id="questBoard"> の対になる </div> を返信機能の後ろに追加
bbs_que_answer 326行目のステップ画像？に関するコード change1(); をコメントアウト
bbs_que_answer 360行目の FormData オブジェクトの中身を修正 FormData(input_form); から FormData(answer_Input_form); へ修正
bbs_que_answer 434行目の divUserArea 関数重複定義を修正して、const divUploadfileArea に変更
bbs_que_answer 435行目も上記に合わせて変更
bbs_que_answer 483行目のステップ画像？に関するコード change1(); をコメントアウト
bbs_que_answer 534行目のステップ画像？に関するコード change3(); をコメントアウト

※別途お聞したい質問
回答画面を作成中に質問＆回答画面のアイコン画像にも clear ボタンを付けたいと考え HTML のみ回答画面に追加しております。
Javascript での追加コードは分からなかったので何も追加していない為、これが問題でエラーが発生しているかもしれません…
現状のコードで問題ないでしょうか？

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

回答No.13

dell_OK

・質問一覧と回答＆返信機能を div で囲って外枠を表示させたいのですが、質問一覧表示コードまでで PHP が切れているためどうすべきか分かりません。

GitHub のコードとサイトのコードに相違があるようなので定かではありませんが、
外枠と言うのが <div id="questBoard"> のことでしたら、
これと対になる </div> を返信機能の後ろに移動してみてください。

補足

アドバイスありがとうございます、<?php echo '</div>'; ?> を追加したところ上手くいきました。