JavaScriptボタンによる表示について

2023/09/05 14:18

このQ&Aのポイント

JavaScriptを使用してボタンによる表示を実装しようとしていますが、うまく動作しません。
おそらくwindow.onloadの使い方が間違っている可能性があります。
質問内容を要約すると、JavaScriptのボタンによる表示を実装したいがうまくいかないため質問しています。

ベストアンサー

javascript ボタンによる表示について

2013/11/26 15:58

javascriptのボタンによる表示について質問があります．質問内容と致しましては，ボタンを表示した時に隠れている問題文を出現させるソースを作っているのですが，うまくプログラムが動作しません．おそらく，window.onloadの使い方が理解しきれてないからだとは思いますが，よくわかりませんので質問させていただきました．回答の方よろしくお願いします．以下ソースです． <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function hideForm1(){ document.getElementById("formblock1").style.display = "none"; } function showForm1() { document.getElementById("formblock1").style.display = "block"; } window.onload = function(){ hideForm1(); }; function hideForm2(){ document.getElementById("formblock2").style.display = "none"; } function showForm2() { document.getElementById("formblock2").style.display = "block"; } window.onload = function(){ hideForm2(); }; function hideForm3(){ document.getElementById("formblock3").style.display = "none"; } function showForm3() { document.getElementById("formblock3").style.display = "block"; } window.onload = function(){ hideForm3(); }; function send(){ function chk1(frm, names){ var r = true; for(var i = 0; i < names.length; i++) r &= (frm.elements[names[i]].value !=""); return r; } var r = true; r &= chk1(document.forms['nform'],['kaitouran11','kaitouran12','kaitouran13','kaitouran14','kaitouran21','kaitouran22','kaitouran23','kaitouran24','kaitouran31','kaitouran32','kaitouran33','kaitouran34']); if(r){ document.forms['nform'].submit(); }else{ alert('解答欄に空白があります'); } } </script> </head> <body> <form> <input type="button" value="問題1" onclick="showForm1(); this.disabled = true;"/> </form> <form> <input type="button" value="問題2" onclick="showForm2(); this.disabled = true;"/> </form> <form> <input type="button" value="問題3" onclick="showForm3(); this.disabled = true;"/> </form> <form name="nform" method="post" action="./kaitou1.php" enctype="multipart/form-data"> <div id="formblock1"> <p>　問題1</p> <p>問題文</p> <p> (1)<input type="text" name="kaitouran11" size="14"> (2)<input type="text" name="kaitouran12" size="14"> (3)<input type="text" name="kaitouran13" size="14"> (4)<input type="text" name="kaitouran14" size="14"> </p> </div> <div id="formblock2"> <p>　問題2</p> <p>問題文</p> <p> (1)<input type="text" name="kaitouran21" size="14"> (2)<input type="text" name="kaitouran22" size="14"> (3)<input type="text" name="kaitouran23" size="14"> (4)<input type="text" name="kaitouran24" size="14"> </p> </div> <div id="formblock3"> <p>　問題3</p> <p>問題文</p> <p> (1)<input type="text" name="kaitouran31" size="14"> (2)<input type="text" name="kaitouran32" size="14"> (3)<input type="text" name="kaitouran33" size="14"> (4)<input type="text" name="kaitouran34" size="14"> </p> </div> </form> <input type="button" value="送信" onclick="send()"> </body> </html>

mauluru
お礼率17% (21/122)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

Picosoft
ベストアンサー率70% (274/391)

2013/11/26 16:32 回答No.1

window.onloadが3回設定されていますが、この方法だと最後に設定した　window.onload = function(){ 　　hideForm3(); 　} しか有効になりません。　hoge = 1; 　　(中略) 　hoge = 2; 　　(中略) 　hoge = 3; というコードがあったときに、window.onload実行時点でのhogeの中身が3であるのと同じです。 1つのイベントに対して複数のイベントハンドラを設定したい場合はaddEventListener関数を使用してください。 https://developer.mozilla.org/ja/docs/Web/API/EventTarget.addEventListener 　window.onload = function(){ 　　hideForm1(); 　}; 　　　↓ 　window.addEventListener("load", hideForm1); 　　または　window.addEventListener("load", 　　function(){ 　　　hideForm1(); 　　} 　);

質問者

お礼 2013/11/27 15:01

回答ありがとうございます。無事解決することができました。また機会があれば回答お願いします。

関連するQ&A

javascript フォームについて
javascriptでフォームを作ったのですが、複数フォームの空白をチェックするにはどのようなプログラムにすればよろしいでしょうか？ onsubmit="return chk1(this)でフォーム送信が押されたときにチェックを行おうと考えているのですがそのときのchk()の中身やif文の条件がわからないのです。どのようにすれば上手くいくでしょうか？回答よろしくお願いします。ソースは以下のとおりです。 <script language="javascript"> function send() { document.nform.submit(); document.nform2.submit(); document.nform3.submit(); } function chk1(frm){ if(frm.elements["txt1"].value==""){ alert("解答欄に空白があります"); /* FALSEを返してフォームは送信しない */ return false; }else{ /* TRUEを返してフォーム送信 */ return true; } } </script> <form name="nform" method="POST" action="mailto:webmaster@a.com?subject=問い合せ" enctype="text/plain"> <p>問1</p> <p> (1)<input type="text" name="kaitouran11" size="20"> (2)<input type="text" name="kaitouran12" size="20"> (3)<input type="text" name="kaitouran13" size="20"> (4)<input type="text" name="kaitouran14" size="20"> </p> </form> <form name="nform2" method="POST" action="mailto:webmaster@leposystems.com?subject=問い合せ" enctype="text/plain"> <p>問2</p> <p> (1)<input type="text" name="kaitouran21" size="20"> (2)<input type="text" name="kaitouran22" size="20"> (3)<input type="text" name="kaitouran23" size="20"> (4)<input type="text" name="kaitouran24" size="20"> </p> </form> <form name="nform3" method="POST" action="mailto:webmaster@leposystems.com?subject=問い合せ" enctype="text/plain"> <p>問3</p> <p> (1)<input type="text" name="kaitouran31" size="20"> (2)<input type="text" name="kaitouran32" size="20"> (3)<input type="text" name="kaitouran33" size="20"> (4)<input type="text" name="kaitouran34" size="20"> </p> </form> <input type="button" value="送信" onClick="send()" onsubmit="return chk1(this)">
- ベストアンサー
- JavaScript
Javascriptを短くしたい
初歩的なことですみません。 Javascriptで表示／非表示を切り替えるものを作ろうと思うのですが、以下のサンプル文のような形では、項目数が増えるとその分だけどんどんJavascriptも長くなっていってしまいます。 Javascript文を簡潔にするには、どのように記述すればよいのでしょうか。よろしくお願いします。 <script type="text/javascript">  </script> <div id="cont1">ああああああ</div> <form> <input type="button" value="表示" onclick="Hyo1(0)"> <input type="button" value="非表示" onclick="Hyo1(1)"> </form> <form> <div id="cont2">いいいいいい</div> <input type="button" value="表示" onclick="Hyo2(0)"> <input type="button" value="非表示" onclick="Hyo2(1)"> </form>
- ベストアンサー
- JavaScript
フォームのリアルタイム入力チェック
現在、下記ソース（他のサイト様を参考）に送信時に入力チェックを行い、エラーがあれば、送信されないようものを使っております。送信時に加え、入力時に入力項目のみをリアルタイムに入力判定を行いたいです、入力時にリアルタイムに行うためには、どのようにすればいいのでしょうか。エラーがあれば、下記のように隠しているメッセージなどが表示され、問題がなければ、表示させないまたは、表示されているエラーメッセージを隠す。で構いません。よろしくお願い致します。・htmlファイル <div id="notice-form" style="display: none; color: red;"> 【必須項目に未入力があります】</div> <form name="mailform" method="post" action="index.php" onsubmit="return formCheck()">  <div id="text1" style="display: none; color: red;"> 【text1入力して下さい】</div> <input type="text" name="text1" /><br /> <div id="text2" style="display: none; color: red;"> 【text2入力して下さい】</div> <input type="text" name="text2" /><br /> <div id="text3" style="display: none; color: red;"> 【text3入力して下さい】</div> <input type="text" name="text3" /><br /> ・JSファイル function formCheck(){ var flag = 0; if(document.mailform.text1.value==""){ flag = 1; document.getElementById('text1').style.display="block"; }else{ document.getElementById('text1').style.display="none"; } if(document.mailform.text2.value==""){ flag = 1; document.getElementById('text2').style.display="block"; }else{ document.getElementById('text2').style.display="none"; } if(document.mailform.text3.value==""){ flag = 1; document.getElementById('text3').style.display="block"; }else{ document.getElementById('text3').style.display="none"; } if(flag){ document.getElementById('notice-form').style.display="block"; return false; }else{ document.getElementById('notice-form').style.display="none"; return true; } }
- 締切済み
- JavaScript
textareaで入力した文字を改行したままで表示したいのですが。
textareaに複数行で入力した文字を改行したままで表示したいのですが改行されずに表示されます。改行したままで表示するのはどうすればいいでしょうか？ <HTML> <HEAD> <STYLE type="text/css">  </STYLE> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY> <FORM name="nform" > <textarea cols="30" rows="10" name="textN"></textarea> <input type="button" value=" 確認 " onClick="check()"> </FORM> <DIV id="test" style="position:absolute;font-size:24px;"> </DIV> </BODY> </HTML>
- ベストアンサー
- HTML
ラジオボタン→セレクトボックスで表示切替がしたい
次のhtml文をラジオボタンではなく、セレクトボックスによる選択に変えることって不可能でしょうか。参考にしたサイトはこちらです。 https://www.torat.jp/css-radiobotton/ 以下はそのソースです。 <form> <div class="form-check"> <input class="form-check-input" type="radio" name="maker" value="food" onclick="formSwitch()" checked> <label class="form-check-label"> 好きな食べ物</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="maker" value="place" onclick="formSwitch()"> <label class="form-check-label"> 好きな場所</label> </div> </form> <ul> <div id="foodList"> <li>お寿司</li> <li>アイスクリーム</li> <li>チーズケーキ</li> <li>お団子</li> </div> <div id="placeList"> <li>自由が丘</li> <li>下北沢</li> <li>吉祥寺</li> <li>高円寺</li> </div> </ul> <script> function formSwitch() { hoge = document.getElementsByName('maker') if (hoge[0].checked) { // 好きな食べ物が選択されたら下記を実行します document.getElementById('foodList').style.display = ""; document.getElementById('placeList').style.display = "none"; } else if (hoge[1].checked) { // 好きな場所が選択されたら下記を実行します document.getElementById('foodList').style.display = "none"; document.getElementById('placeList').style.display = ""; } else { document.getElementById('foodList').style.display = "none"; document.getElementById('placeList').style.display = "none"; } } window.addEventListener('load', formSwitch()); </script>
- 締切済み
- JavaScript
Firefoxで表示できないのは何故でしょう？
お世話になります IE6、Operaでは表示できたのですがFirefoxでは表示できませんでした（＞＜）何か見落としがあるのでしょうか？ <script language="javascript">  </script> <div id="div1">a</div> <form action="test.cgi" method="post"> <input type="hidden"name="a" value="leap_day"> <input type="image" src="sample0.gif" id="img1" style="position:absolute;display:none;"> </form> <form action="test.cgi" method="post"> <input type="hidden"name="b" value="leap_day"> <input type="image" src="sample1.gif" id="img2" style="position:absolute;display:none;"> </form> n=document.getElementById("div1").innerText; if(n == "a0"){ } if(n == "a") { } を消すと表示はできるのですが・・・
- ベストアンサー
- JavaScript
ラジオボタンではなくセレクトボックスで表の表示切換
セレクトボックスで表の表示非表示を選択できるようにしたいです。最初は非表示で。jsで。以下はその分です。どこを変えたらいいですか。 <script type="text/javascript"> function Click_idbbb() { 　　if (document.all.idbbb.checked==true) { 　　　　document.all.bbb.style.display = "block" 　　} else { 　　　　document.all.bbb.style.display = "none" 　　} } function Click_idccc() { 　　if (document.all.idccc.checked==true) { 　　　　document.all.ccc.style.display = "block" 　　} else { 　　　　document.all.ccc.style.display = "none" document.getElementById('lng').innerHTML=tmp2; document.getElementById('table').innerHTML=tmp3; } </script> <div> <p> <input id ="idbbb" type="checkbox" name="kakikukeko"onclick="Click_idbbb()">かきくけこ <input id ="idccc" type="checkbox" name="sashisuseso"onclick="Click_idccc()">さしすせそ </p> <div id="bbb" style="display:none;"> 　<table border="1" cellspacing="2" cellpadding="0"> 　　<tr><td>テーブル２<p></p></td></tr> 　</table> </div> <div id="ccc" style="display:none;"> 　<table border="1" cellspacing="2" cellpadding="0"> 　　<tr><td>テーブル３<p></p></td></tr> 　</table> </div>
- ベストアンサー
- JavaScript
2段階ラジオボタン後、DIVを表示したい
色々と自力で試行錯誤しましたが、知識が足りません。 javaScriptのif構文とかswich構文の部分が問題かなぁ～と推測しますが、自力で構文を認識・改造が出来ませんので、ご指導をお願い致します。 1段目（ラジオ）＜バス＞＜電車＞ 2段目（ラジオ）＜バス/高級＞＜バス/普通＞ 2段目（ラジオ）＜電車/高級＞＜電車/普通＞ 3段目（DIV）＜高級バス＞＜バス＞＜高級電車＞＜電車＞ 2段目の動作がオカシイです。連動している一方のみを表示したいです。（連動してないその他は、見えなくしたいです）以下、ソースです。 <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <head> <style type="text/css"> .second , .third{ display: none; } </style> <script type="text/javascript"></script> </head> <body> <form action=""> <label><input type="radio" name="move" value="bus" id="move_0" onClick="SetSubMenu(value);">バス</label> <label><input type="radio" name="move" value="train" id="move_1" onClick="SetSubMenu(value);">電車</label> </form> <form action=""> <div class="second" id="bus"> <label><input type="radio" name="grade" value="bus_high" id="grade_0" onClick="SetSubMenu(value);">バス/高級</label> <label><input type="radio" name="grade" value="bus_normal" id="grade_1" onClick="SetSubMenu(value);">バス/普通</label> </div> <div class="second" id="train"> <label><input type="radio" name="grade" value="train_high" id="grade_2" onClick="SetSubMenu(value);">電車/高級</label> <label><input type="radio" name="grade" value="train_normal" id="grade_3" onClick="SetSubMenu(value);">電車/普通</label> </div> </form> <div class="third" id="bus_high">高級バス</div> <div class="third" id="bus_normal">バス</div> <div class="third" id="train_high">高級電車</div> <div class="third" id="train_normal">電車</div> </body> </html>
- ベストアンサー
- JavaScript
JavaScriptでテキストを表示・非表示・・・
こんばんは。お世話になります。 JavaScriptでテキストがボタンを押すと表示/非表示と切り替わるようにしたいです。サイトを参考に試してみましたが一か所しか表示/非表示となりませんでした。 1行おきに表示/非表示としたいのでブロック単位では指定出来ません。 display構文を使って作りました。 div idがそれぞれの部分に必要かと思い、div id="○○a"、div id="○○b"という風に付けましたがうまくいきませんでした。　　　↓このような形にしたいです　あいうえおかきくけこ　　サシスセソタチツテト　←この行を表示/非表示　なにぬねのはひふへほ　　マミムメモヤユヨ　←この行を表示/非表示こういう風なように打ちました。あいうえおかきくけこ<br> <div id="disp">サシスセソタチツテト</div><br> 　　　　　　　なにぬねのはひふへほ<br>　 <div id="disp">マミムメモヤユヨ</div><br> <form> <input type="button" value="表示" onclick="Hyoji1(0)"> <input type="button" value="非表示" onclick="Hyoji1(1)"> </form> <script type="text/javascript">  </script> どの辺りを間違っているでしょうか?宜しくお願い致します。
- ベストアンサー
- JavaScript
javascript ボタンを非表示にしたい
javascriptを学習しています。 3回目以降は追記できないようにしましたが、ボタンを非表示に出来ておりません。どなたかご教授お願いいたします。 <!DOCTYPE html> <html> <head> <title>アカウント登録</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="base container"> <div class="row"> <h1>アカウント登録</h1> </div> <div class="row"> <div class="card" id="card"> <div class="card-block"> <form id="form-area" class="form-inline" method="post"> <div class="form-group"> <div class="input-group"> <input id="namae" name="namae" type="text" class="form-control" placeholder="名前"> </div> </div> <div class="form-group"> <div class="input-group"> <input id="nickname" name="nickname" type="text" class="form-control" placeholder="ニックネーム"> </div> </div> <div class="form-group"> <input id="tuikaBtn" type="button" name="touroku" value="追加"> </div> <table id="result-table"> <thead> <tr> <th>名前</th> <th>ニックネーム</th> <th>削除</th> </tr> </thead> </table> </form> <div id="tuikaMoto"> </div> <div id="result"></div> </div> </div> </div> </div> </div> <div id="overLay"> </div> <script> class NameTable { constructor() { this.data = []; this.table = document.getElementById('result-table'); this.tbody = this.table.createTBody(); this.btn = document.getElementById("tuikaBtn"); this.input_namae = document.getElementById("namae"); this.input_nickname = document.getElementById("nickname"); } handleEvent(e) { if (e.target === this.btn) { const name_value = this.input_namae.value, nickname_value = this.input_nickname.value; if (this.checkTsuika(name_value, nickname_value)) { this.pushData(name_value, nickname_value); this.createTable(); }; } else if (e.target.matches('.del')) { this.clickDel(e.target); } } pushData(name, nickname) { /* DBなどに追加する場合は、ここでfetchなどで通信 */ this.data.push({ name: name, nickname: nickname }); window.alert(`「[${name}]さん[${nickname}]にて登録しました。」`); this.input_namae.value = ''; this.input_nickname.value = ''; if (this.data.length > 2) { Object.assign(this.btn, { value: '', disabled: true, }); } } createTable() { while (this.tbody.firstChild) { this.tbody.removeChild(this.tbody.firstChild); } this.data.forEach(d => { const tr = this.tbody.insertRow(-1); tr.insertCell(0).appendChild(document.createTextNode(d.name)); tr.insertCell(1).appendChild(document.createTextNode(d.nickname)); const input_del = document.createElement('input'); Object.assign(input_del, { type: 'button', value: '削除', className: 'del', }); tr.insertCell(2).appendChild(input_del); }); } checkTsuika(name, nickname) { if (name === "" || nickname === "") { return false; } return window.confirm(`「[${name}]さん[${nickname}]を登録します。よろしいですか？」`); } clickDel(target) { /* fetchなどで削除を送信 */ const dels = [...this.tbody.querySelectorAll('.del')]; this.data = this.data.filter((_, i) => dels[i] !== target); this.createTable(); Object.assign(this.btn, { value: '追加ボタン', disabled: false, }); } } // 実行 window.addEventListener('DOMContentLoaded', () => { const table = new NameTable(); document.addEventListener('click', table, false); }); </script> </body> </html>
- 締切済み
- JavaScript