※ ChatGPTを利用し、要約された質問です(原文:javascript ボタンによる表示について)
JavaScriptボタンによる表示について
このQ&Aのポイント
JavaScriptを使用してボタンによる表示を実装しようとしていますが、うまく動作しません。
おそらくwindow.onloadの使い方が間違っている可能性があります。
質問内容を要約すると、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>
お礼
回答ありがとうございます。無事解決することができました。 また機会があれば回答お願いします。