下記プログラムは、自分の勉強用で作ったものですが、
解答ボタンを押して正解し、alertウィンドウを閉じた瞬間に
説明文のsm1,sm2,sm3をhtml上に追加表示するには
どこをどう直したらいいのでしょうか?
よろしくお願いいたします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language="JavaScript">
<!--
var sm1;
var sm2;
var sm3;
function kaitou1(){
if(document.myForm.ans1.value == "number"){
alert("正解です");
sm1 = "number型とは~";
}else{
alert("違います");
}
}
function kaitou2(){
if(document.myForm.ans2.value == "string"){
alert("正解です");
sm2 = "string型とは~";
}else{
alert("違います");
}
}
function kaitou3(){
if(document.myForm.ans3.value == "boolean"){
alert("正解です");
sm3 = "boolean型とは~";
}else{
alert("違います");
}
}
//-->
</script>
</head>
<body>
<p style="width:330px; padding:5px; background-color:#ddd">変数の基本的なデータ型には3つあります。<br>
それら3つは何でしょう?<br>
下記○○に半角英数字で入力して下さい。</p>
<form name="myForm">
<p>数値を表す○○型 ⇒
<input type="text" size="20" name="ans1">
<input type="button" value="解答" onclick="kaitou1()">
</p>
<p>文字列を表す○○型 ⇒
<input type="text" size="20" name="ans2">
<input type="button" value="解答" onclick="kaitou2()">
</p>
<p>真偽を表す○○型 ⇒
<input type="text" size="20" name="ans3">
<input type="button" value="解答" onclick="kaitou3()">
</p>
</form>
<script language="JavaScript">
<!--
document.write("<p>"+sm1+"</p>");
document.write("<p>"+sm2+"</p>");
document.write("<p>"+sm3+"</p>");
//-->
</script>
</body>
</html>
No.1ベストアンサー
- 回答日時:
◆上部javasccript
function kaitou1(){
if(document.myForm.ans1.value == "number"){
alert("正解です");
sm1 = "number型とは~";
document.getElementById("ans_sm1").innerHTML = sm1; #追加
}else{
alert("違います");
}
}
function kaitou2(){
if(document.myForm.ans2.value == "string"){
alert("正解です");
sm2 = "string型とは~";
document.getElementById("ans_sm2").innerHTML = sm2; #追加
}else{
alert("違います");
}
}
function kaitou3(){
if(document.myForm.ans3.value == "boolean"){
alert("正解です");
sm3 = "boolean型とは~";
document.getElementById("ans_sm3").innerHTML = sm3; #追加
}else{
alert("違います");
}
}
◆下部javascript部分
<script language="JavaScript">~</script>部分を削除し、代わりに
<p id="ans_sm1"></p>
<p id="ans_sm2"></p>
<p id="ans_sm3"></p>
を記述
○解説
(1) あらかじめ表示用のHTMLオブジェクトを用意(<p id="ans_sm1"></p>部分)
(2) 正解したときにinnerHTMLで(1)のオブジェクトに文字列/HTMLコードを挿入
・オブジェクトはgetElementByIdで取得
・<p id="ここ"> と getElementById("ここ") は紐づきます
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript HTMLでJavaScriptを使ってパスワードの強化判定のプログラムを作成しています。 一通り作っ 2 2022/10/19 01:41
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
テキストフィールド未入力の場...
-
ボタン押下しテキストエリアに...
-
javaScriptの変数をJavaの変数...
-
追加ボタンを押した際に ok ボ...
-
VBScriptで子画面へ配列のデー...
-
ボタンをクリックして文字を置...
-
クリックさせたいが、click()が...
-
ボタンかリンクをクリックする...
-
if構文
-
JavaScript Form OPTION value
-
vbsでフォーム入力ができません
-
小窓が残像を残して移動
-
ひとつのボタンでタイマーを動...
-
innerHTML内では改行は禁止?
-
BackSpaceしたい(QNo.2734284の...
-
プルダウンで選択したページに...
-
formのfileの値をhiddenでも持...
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
iOSのみダブルタップが必要
-
onclickが動作しない
-
追加ボタンを押した際に ok ボ...
-
ボタンかリンクをクリックする...
-
innerHTML内では改行は禁止?
-
クリックさせたいが、click()が...
-
javaScriptの変数をJavaの変数...
-
formのfileの値をhiddenでも持...
-
JavascriptでDOM-based XSSの発...
-
クリックでテーブル内の背景色...
-
VB.NETで<Input>タグ、<text...
-
開いた子ウィンドウにあるボタ...
-
jQueryで設定したイベントハン...
-
javascriptで作成されたテーブ...
-
HTMLのテキストボックスへのド...
-
テキストフィールド未入力の場...
-
JavaScriptのfileオブジェクト...
-
JSのボタンを複数う使うには
-
オンクリックで現在時刻の取得→...
おすすめ情報