

### 質問

後述のphpファイルにて以下のような動作を意図しています。

  * buttonを押す
  * buttonに対応するidが、JavaScriptの.getElementByIdへ
  * JavaScriptの.addEventlistener('click')、にて、押したbuttonのidと対応する入力フォームが表示される。
  * 押したbutton以外の入力フォームは非表示になる。

しかし、新規投稿ボタンのみ押したらフォームが表示される現状です。削除・編集ボタンを押しても各フォームが表示されません。

### これまで試したこと

  * 開発者用ツールにてログを確認しても、JavaScriptについてのエラーメッセージは何もありませんでした。
  * 削除ボタン・編集ボタンのid名、及び各フォームのid名がJavaScriptのそれらと一致しているか確認しましたが、特に異常はありませんでした。  
※なお、新規投稿ボタンのみ意図通りに動作すると記載しましたが、新規投稿ボタンのid・入力フォームのid名を変更した際には、動作しなくなりました。

  * CSSも確認しましたが、当質問における行程には関わらないことが確認できました。  
回答者様の要望があれば、CSSも記載したいと想います。

現時点では、問題はJavaScript側（main.js）にあると思っています（関数が間違っている等）。

回答者様、ご協力よろしくお願い致します。  
私の方でも色々検証・検索してエラーを解消できるよう尽力します。

### コード

以下、phpファイルです。

[code]

    <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>
    
[/code]

以下、main.jsです。

[code]

    // ボタン要素と入力フォーム要素を取得
    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';
    });
    
[/code]


CC BY-SA 4.0
2023-09-05T08:21:10.993
96134
2023-09-10T14:03:25.777
2023-09-06T02:49:05.843
3060
51192
question
javascript html class
ボタンを押したら対応する入力フォームが表示されるようにしたい
  
  
下記の `div` タグが閉じていなかったことに由来するエラーでした。  
ご協力していただいた皆様、ありがとうございました。

[code]

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

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


CC BY-SA 4.0
2023-09-06T15:28:04.377
96144
2023-09-10T14:03:25.777
2023-09-10T14:03:25.777
51192
51192
96134
answer