- ベストアンサー
JavaScriptでonClickの使い方｜ボタンを押して内容の表示・非表示を行う方法
- JavaScriptのonClickと関数の使い方で悩んでいます。ボタンを押して内容の表示・非表示を行いたいと思っています。
- 現在、divブロック表示非表示切り替えスクリプトを参考に、１つのformの中で複数の項目のボタンを押して表示・非表示を行う方法を探しています。
- ３つの関数にそれぞれbuttonのnameとdivのidを変えて書いていますが、１つの関数にうまくまとめる方法がわかりません。JavaScript初心者で、勉強不足なので、アドバイスをお願いします。
- ymcnmrkn
- お礼率100% (2/2)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
onclickの中で呼ぶfunctionに引数を付けてはならないということはないので、 処理対象のidを受け取る表示/非表示のfunctionを作ってやればこんな感じにまとめられます。 <html> <script> function openclosebtn(id) { var e = document.getElementById(id); if (e.style.display == '') { e.style.display = 'none'; } else { e.style.display = ''; } } </script> <form name="btnname"> <input type="button" name="inpname1" value="▼" onClick="openclosebtn('openclose1')"> <div id="openclose1" style="display:none;"> 内容：１ </div> <input type="button" name="inpname2" value="▼" onClick="openclosebtn('openclose2')"> <div id="openclose2" style="display:none;"> 内容：２ </div> <input type="button" name="inpname3" value="▼" onClick="openclosebtn('openclose3')"> <div id="openclose3" style="display:none;"> 内容：３ </div> </form> </html>
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
処理対象のidを受け取る表示/非表示のfunctionのスクリプト例を載せていただき、ありがとうございました。 うまくできました。