こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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>

投稿日時 - 2013-11-26 15:58:12

QNo.8362741

すぐに回答ほしいです

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

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-26 16:32:24

お礼

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

投稿日時 - 2013-11-27 15:01:23

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問