つらい・・・

変数名をどのようにつけるのが良いかアドバイスお願い致します

解決済

質問者：初心者サイト作成
質問日時：2024/02/28 19:44
回答数：4件

非同期通信でQ＆A掲示板を作成しています。
JavaScript appendChild で親要素に子要素を追加する際、HTMLのクラスごとに判別するできるようにしたいのですが、変数名に - や _ や空白が変数名に使えずエラーが起きておりどうすべきか悩んでおります。
アドバイスお願い致します。


<div id="confirm_area" style="display: block;">
<div class="title-partial parts"> 
質問タイトルテスト
</div>

<div class="namae-partial parts"> 
名前テスト
</div>

<div class="body-partial parts">
コメントテスト
</div>

<div class="post-button">
<button type="button">入力画面へ戻る</button><button type="button" name="output">結果画面へ進む</button>
</div>
</div>
</div>

</div>
</div>


<script>
confirm_area.textContent = '';
var div;
var child;
// class
const board_form_partial_div = document.createElement("div");
// classの追加
board_form_partial_div.classList.add("board_form_partial");
// id
const js_board_form_partial_div = document.createElement('div');
// idの追加
js_board_form_partial_div.id = 'js_board_form_partial_div';

const questionHeader-partial_div = document.createElement("div");
questionHeader-partial_div.classList.add("questionHeader-partial");
div.appendChild(child); // div の末尾に child を追加

const title-partial parts_div = document.createElement("div");
title-partial parts_div.classList.add("title-partial parts");
child = document.createElement("p");
child.appendChild(document.createTextNode(title_value));
div.appendChild(child); // div の末尾に child を追加

const namae-partial parts_div = document.createElement("div");
namae-partial parts_div.classList.add("namae-partial parts");
child = document.createElement("p");
child.appendChild(document.createTextNode(namae_value));
div.appendChild(child); // div の末尾に child を追加

const body-partial parts_div = document.createElement("div");
body-partial parts_div.classList.add("body-partial parts");
child = document.createElement("p");
child.appendChild(document.createTextNode(question_value));
div.appendChild(child); // div の末尾に child を追加

const post-button_div = document.createElement("div");
post-button_div.classList.add("post-button");

child = document.createElement("button");
child.type = "button";
child.innerText = "入力画面へ戻る";
child.addEventListener("click", () => {
input_area.style.display = "block";
// 空文字を入れることで要素内を空にできる
confirm_area.textContent = '';
confirm_area.style.display = "none";
});
div.appendChild(child); // div の末尾に child を追加
child = document.createElement("button");
child.type = "button";
//name属性の追加・変更
child.setAttribute("name", "output");
child.innerText = "結果画面へ進む";
child.addEventListener("click", confirm_button_click);
div.appendChild(child); // div の末尾に child を追加
confirm_area.appendChild(div); // confirm_area の末尾に div を追加
input_area.style.display = "none";
confirm_area.style.display = "block";
})
.catch(error => {});
}
</script>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： Ogre7077
回答日時：2024/02/28 23:03

案1. ローカル変数名をキャメルケースで書く

例)
var divTitlePartialParts = 要素;
divTitlePartialParts.append(子要素);
親要素.append(divTitlePartialParts);

案2. 変数名ではなくプロパティ名として書く
例)
var div = {};
div["title-partial parts"] = 要素;
div["title-partial parts"].append(子要素);
親要素.append(div["title-partial parts"]);

余談ではありますが
誤: 要素.classList.add("title-partial parts");
正: 要素.classList.add("title-partial", "parts");
参考)
https://developer.mozilla.org/ja/docs/Web/API/DO …

- 1
- 件

通報する

この回答へのお礼

アドバイスありがとうございます。
案2. 変数名ではなくプロパティ名として書くについてお聞きしたいのですが、プロパティ名は class ごとに分けるべきでしょうか？
HTMLタグごとのみ分けるだけで良いのでしょうか？

※例（質問のコードにはないスタンプ選択部分のコードを書き換えてみました。）

※該当コード（sample.phpの304行目から408行目までに案1. ローカル変数名をキャメルケースで書く方法をsample.jsに案2変数名ではなくプロパティ名として書く方法についてお聞きしたいコードを書きました）
https://wandbox.org/permlink/ncJsnAA8BEgkpAx5

通報する

お礼日時：2024/02/29 01:30