非同期通信でQ&A掲示板を作成しています。
JavaScript appendChild で親要素に子要素を追加する際、HTMLのクラスごとに判別するできるようにしたいのですが、変数名に - や _ や空白が変数名に使えずエラーが起きておりどうすべきか悩んでおります。
アドバイスお願い致します。
<!-- 表示したいHTML-->
<div id="confirm_area" style="display: block;">
<div class="title-partial parts"> <!-- title-partial + parts -->
質問タイトルテスト
</div>
<div class="namae-partial parts"> <!-- title-partial + parts -->
名前テスト
</div>
<div class="body-partial parts"><!-- body-partial + parts -->
コメントテスト
</div>
<div class="post-button"><!-- ボタンを押せなくする -->
<button type="button">入力画面へ戻る</button><button type="button" name="output">結果画面へ進む</button>
</div>
</div>
</div>
<!-- type、name、id、valueの順番 -->
</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>
No.4ベストアンサー
- 回答日時:
案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 …
アドバイスありがとうございます。
案2. 変数名ではなくプロパティ名として書くについてお聞きしたいのですが、プロパティ名は class ごとに分けるべきでしょうか?
HTMLタグごとのみ分けるだけで良いのでしょうか?
※例(質問のコードにはないスタンプ選択部分のコードを書き換えてみました。)
※該当コード(sample.phpの304行目から408行目までに案1. ローカル変数名をキャメルケースで書く方法をsample.jsに案2変数名ではなくプロパティ名として書く方法についてお聞きしたいコードを書きました)
https://wandbox.org/permlink/ncJsnAA8BEgkpAx5
No.3
- 回答日時:
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript Javascriptのhtml出力についてappendChildはどのような意味があるのでしょうか? 2 2024/01/29 16:48
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript JavascriptでDom XSSの脆弱性対策を行いたい 2 2023/09/24 21:20
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- JavaScript 【JavaScript】検索がヒットした場合、プルダウンをオープンで表示させる方法 2 2023/09/06 14:02
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascriptテキストBOX色を元に...
-
MAX関数を使ってからLEFT JOIN...
-
自働生成される<div>タグに連番...
-
指定したパスが現URLに含まれて...
-
removeAttribute()メソッドで削...
-
クリックすると下に説明文が出...
-
リンク色を動的に変更したい。i...
-
ネストされたハッシュの値から...
-
iframe内からjQueryで指定したい
-
JavascriptでDIV~DIVをリロードで
-
プルダウンとチェックボックス...
-
checkboxにチェックを入れると...
-
テキストエリア内の一部の文字...
-
折りたたみ式JavaScriptをcheck...
-
背景色を一定時間ごとにランダ...
-
JSで動的にリンクを作成
-
javascriptでのアコーディオン...
-
複数のリンク画像を一定時間で...
-
ページ遷移後のcssプロパティ保持
-
IFRAMEの表示/非表示を切り替え...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
IFRAMEの表示/非表示を切り替え...
-
removeEventListenerについて
-
背景色を透明化
-
createElementで作成した要素を...
-
javascriptでpostした値が取得...
-
読み込んだQRコードをフォーム...
-
iframe内のリンクが飛ばないの...
-
jQueryでクリックされた要素のi...
-
ダブルクォーテーションが消え...
-
<div ~ </div> で囲まれたテキ...
-
【HP作成】クリックすると下...
-
<Div>の中の要素の数を調べる
-
jQueryで特定id以外の下にある...
-
VBScript+IEのチェックボック...
-
removeAttribute()メソッドで削...
-
折りたたみ部分にアンカーでリ...
-
onclickを利用した伸縮メニュー...
-
背景色を一定時間ごとにランダ...
おすすめ情報

