0

質問

後述の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';
});

1 件の回答 1

1

下記の div タグが閉じていなかったことに由来するエラーでした。
ご協力していただいた皆様、ありがとうございました。

<!-- 以下、新規投稿フォーム -->
    <div class="form-container" id="inputForm" style="display: none;">

追記:今後、インデントの取り扱いに細心の注意を払いたいと思います。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。