質問
後述のphpファイルにて以下のような動作を意図しています。
- buttonを押す
- buttonに対応するidが、JavaScriptの.getElementByIdへ
- JavaScriptの.addEventlistener('click')、にて、押したbuttonのidと対応する入力フォームが表示される。
- 押したbutton以外の入力フォームは非表示になる。
しかし、新規投稿ボタンのみ押したらフォームが表示される現状です。削除・編集ボタンを押しても各フォームが表示されません。
これまで試したこと
- 開発者用ツールにてログを確認しても、JavaScriptについてのエラーメッセージは何もありませんでした。
- 削除ボタン・編集ボタンのid名、及び各フォームのid名がJavaScriptのそれらと一致しているか確認しましたが、特に異常はありませんでした。
※なお、新規投稿ボタンのみ意図通りに動作すると記載しましたが、新規投稿ボタンのid・入力フォームのid名を変更した際には、動作しなくなりました。 - CSSも確認しましたが、当質問における行程には関わらないことが確認できました。
回答者様の要望があれば、CSSも記載したいと想います。
現時点では、問題はJavaScript側(main.js)にあると思っています(関数が間違っている等)。
回答者様、ご協力よろしくお願い致します。
私の方でも色々検証・検索してエラーを解消できるよう尽力します。
コード
以下、phpファイルです。
<body>
<!-- 以下、入力フォームを表示するタブ -->
<button class="navigation-button" id="showFormButton">新規投稿</button>
<button class="navigation-button" id="deleteButton">削除</button>
<button class="navigation-button" id="editButton">編集</button>
<div class="split-box below-box">
<!-- 以下、新規投稿フォーム -->
<div class="form-container" id="inputForm" style="display: none;">
<form action="" method="post" enctype="multipart/form-data">
<div>
<input id="name" type="text" name="name" placeholder="名前" required><br>
<textarea id="cooment" type="text" name="comment" placeholder="コメント(必須)" required autocorrect="on" wrap="hard" cols="40" row="100"></textarea><br><br>
</div>
<label for="image" class="filelabel">画像ファイル選択</label>
<input type="file" name="image" id="image" class="fileinput"><br><br>
<label for="audio" class="filelabel">音声ファイル選択</label>
<input type="file" name="audio" id="audio" class="fileinput"><br><br>
<div>
<input type="password" name="pass" placeholder="ログイン時のパスワード" class="pass"><br><br>
<input type="submit" name="submit" class="btn_passview" onclick="togglePassword()" onsubmit="showConfirmation()">
</form>
</div>
<!-- 以下、削除フォーム -->
<div class="form-container" id="deleteForm" style="display: none;">
<form action="" method="post">
<input type="number" name="delete" placeholder="削除対象番号" size="7"><br>
<div>
<input type="text" name="del_pass" placeholder="パスワード:必須" class="pass"><br><br>
<input type="submit" name="submit" class="btn_passview" onclick="togglePassword()">
</div>
</form>
</div>
<!-- 以下、編集フォーム -->
<div class="form-container" id="editForm" style="display: none;">
<form method="post" action="">
<input type="number" name="edit" placeholder="編集対象番号" size="7"><br>
<div>
<input type="text" name="edit_pass" placeholder="パスワード:必須" class="pass"><br><br>
<input type="submit" name="submit" class="btn_passview" onclick="togglePassword()">
</div>
</form>
</div>
<--! 中略 -->
</div>
</div>
</div>
</body>
<script src='main.js'></script>
以下、main.jsです。
// ボタン要素と入力フォーム要素を取得
const showFormButton = document.getElementById('showFormButton');
const deleteButton = document.getElementById('deleteButton');
const editButton = document.getElementById('editButton');
const inputForm = document.getElementById('inputForm');
const deleteForm = document.getElementById('deleteForm');
const editForm = document.getElementById('editForm');
// ボタンがクリックされたときの処理
showFormButton.addEventListener('click', () => {
// 他のフォームを非表示にし、入力フォームを表示
inputForm.style.display = 'block';
deleteForm.style.display = 'none';
editForm.style.display = 'none';
});
deleteButton.addEventListener('click', () => {
// 削除フォームを表示し、他のフォームを非表示にする
inputForm.style.display = 'none';
deleteForm.style.display = 'block';
editForm.style.display = 'none';
});
editButton.addEventListener('click', () => {
// 編集フォームを表示し、他のフォームを非表示にする
inputForm.style.display = 'none';
deleteForm.style.display = 'none';
editForm.style.display = 'block';
});