WordPressの質問（q10217484）の続

質問

アップロードされたカメラ画像を非表示にするコードを追加したのですが、表示するためのURLを追加するコードが抜けており追加いたしました。
上記とは別にアップロードされたファイルをエンコードするコードも抜けているのではないかと思っております。
旧コードでは対象ファイルではない場合にアラートで警告ダイアログを表示するコードとは別にエンコードするコードがあるため最新コードにも追加すべきではないかと考えております…

下記のコードは追加すべきでしょうか？（single-input.php の15行目から38行目まで）

$attach = [];
if (!empty($_SESSION['attach'])) {
foreach ($_SESSION['attach']['data'] as $i => $data) {
if (!empty($data)) {
$base64 = base64_encode($data);
}
$type = $_SESSION['attach']['type'][$i];
switch ($type) {
case 'image/jpeg':
case 'image/png':
$attach[] = '<img style="height: 100px;" src="data:'.$type.';base64,'.$base64.'">';
break;
case 'video/mp4':
$attach[] = '<video style="height: 100px;" controls src="data:'.$type.';base64,'.$base64.'">';
break;
case 'application/pdf':
$attach[] = '<iframe style="height: 100px;" src="data:'.$type.';base64,'.$base64.'"></iframe>';
break;
default:
$attach[] = '';
break;
}
}
}

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

※旧コード
https://wandbox.org/permlink/cfzsJgBFcYrcIDI1

回答No.36

dell_OK · ベストアンサー

・参照している変数が存在しないと書かれているようなのです

そうですね。
コードを見ると、用意した変数は　divBoardFormPartial　ですが、
エラー個所では　divJsBoardFormPartial　と書かれています。
違いの「Js」はＩＤ名をそのまま書かれたからですね。
－－－－
// class
const divBoardFormPartial = document.createElement("div");
// classの追加
divBoardFormPartial.classList.add("board_form_partial");
// idの追加
divJsBoardFormPartial.id = 'js_board_form_partial_div';
－－－－

ＩＤを設定するにしても変数は変わりませんので「Js」のないものを書いてください。
－－－－
divBoardFormPartial.id = 'js_board_form_partial_div';
－－－－

変数名のつけ方についてクラスとかＩＤとかややこしい説明をしなかった方がよかったのかと、いまさらながらに思っています。

・1つの HTMLタグに複数のクラスを追加する方法について調べた際に答えが出てこず

そうですね。
次に発生するエラーはまさにそれです。
－－－－
divTitlePartialParts.classList.add("title-partial parts"); // classの追加
－－－－

classList.add()はクラスを追加する関数ですが、"title-partial parts"はクラスではありません。
"title-partial"と"parts"がクラスです。
なので、それぞれを追加するこんな書き方や、
－－－－
divTitlePartialParts.classList.add("title-partial"); // classの追加
divTitlePartialParts.classList.add("parts"); // classの追加
－－－－

複数同時に追加する書き方や、
－－－－
divTitlePartialParts.classList.add("title-partial", "parts"); // classの追加
－－－－

その関数は使わず、class属性を書きかえてしまうこんな書き方があります。
－－－－
divTitlePartialParts.className = "title-partial parts"; // classの追加
－－－－
divTitlePartialParts.setAttribute("class", "title-partial parts"); // classの追加
－－－－

追加や削除でクラスを頻繁に書きかえるのならclassListを使うのもいいと思いますが、要素を作りっぱなしでそのままのもに関してはclassNameでもいいのかなと思います。
https://developer.mozilla.org/ja/docs/Web/API/Element/classList
https://developer.mozilla.org/ja/docs/Web/API/Element/className

お礼

こちらが最新の質問になります。
回答の期限が切れていることに気が付かず、申し訳ありません。
アドバイス宜しくお願い致します。

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

補足

Q.コードを見ると、用意した変数は　divBoardFormPartial　ですが、
エラー個所では　divJsBoardFormPartial　と書かれています。
違いの「Js」はＩＤ名をそのまま書かれたからですね。
ＩＤを設定するにしても変数は変わりませんので「Js」のないものを書いてください。

A.回答ありがとうございます、変数をそろえるんですね理解できました。

Q.classList.add()はクラスを追加する関数ですが、"title-partial parts"はクラスではありません。
"title-partial"と"parts"がクラスです。
追加や削除でクラスを頻繁に書きかえるのならclassListを使うのもいいと思いますが、要素を作りっぱなしでそのままのもに関してはclassNameでもいいのかなと思います。

➀なので、それぞれを追加するこんな書き方や、
－－－－
divTitlePartialParts.classList.add("title-partial"); // classの追加
divTitlePartialParts.classList.add("parts"); // classの追加
－－－－

➁複数同時に追加する書き方や、
－－－－
divTitlePartialParts.classList.add("title-partial", "parts"); // classの追加
－－－－

➂その関数は使わず、class属性を書きかえてしまうこんな書き方があります。
－－－－
divTitlePartialParts.className = "title-partial parts"; // classの追加
－－－－
divTitlePartialParts.setAttribute("class", "title-partial parts"); // classの追加
－－－－

A.解説ありがとうございます。➀➁は恐らくクラスを2つ分けることになり下記のように書くことができないと思われる為、
➂の方法で書きたいのですが頻繁に書き換える場合 classList を使ったほうが良いとのことでどちらを選択すべきでしょうか？

・title-partial {

}