ここから本文です

JavaScriptをつかってプログラムを作りたいのですが分からない点があるのでどなた...

アバター

ID非公開さん

2017/7/414:54:08

JavaScriptをつかってプログラムを作りたいのですが分からない点があるのでどなたかご教授お願いいたしまふ。

添付した画像のようなWebページを作ったのですが
ラジオボタンの経営学科を選んでいたとして、テキストボックスにりかと入力してアラートで表示を押すとアラートで経営学科のりかさんと表示されるようにしたいです。
function関数を使った方法でやりたいと思っています。

下のようにやってみたのですが、その部分だけできなかったので教えて頂きたいです。

<!doctype html>



<script>


function ckshow(){

var target=document.getElementById("output");

target.innerHTML=document.forms["fn_a"].elements["name"].value+"さん";

}


function ckdel(){

document.forms["fn_a"].elements["name"].value="";

document.getElementById("output").innerHTML="msg:名前を消去しました";
}



function showMsg(){

window.alert(document.forms["fn_a"].elements["subject"].value+"の"+document.forms["fn_a"].elements["name"].value+"さん");


}


</script>

</head>
<body>

<h1>1</h1>
<!----------フォーム---------->

<form name="fn_a">

<p><label>
<input type="text" name="name" size="50"></label>

<label><input type="button" value="名前を下に表示"onClick="ckshow();"></label>

<label><input type="reset"value="名前を消去"onClick="ckdel();"> </label> </p>

</form>

<hr>

<div id="output">ここに出力させます</div>


<h1>2</h1>

<p><label>
<label><input type="radio" name="subject" value="国語国文学科">国語国文学科</label>
<label><input type="radio" name="subject" value="英語英文学科">英語英文学科</label>
<label><input type="radio" name="subject" value="日本史学科">日本史学科</label>
<label><input type="radio" name="subject" value="社会情報学科">社会情報学科</label></p>



<p><label>


<input type="text" name="in_data" size="50"></label>


<br><label>
<input type="button" value="押すとアラートで表示" onClick="showMsg();">
</label></p>



</form>

</body>
</html>

label&amp;gt,input type,subject&amp;quot,document.forms,radio&amp;quot,form&amp;gt,reset&amp;quot

閲覧数:
66
回答数:
4
お礼:
25枚

違反報告

ベストアンサーに選ばれた回答

2017/7/417:06:51

</form>が2つあるので1つ目の余計な</form>を削除。


function showMsg(){

window.alert(document.forms["fn_a"].elements["subject"].value+"の"+document.forms["fn_a"].elements["name"].value+"さん");

}

を改造して↓な感じに。

function showMsg(){
for(var t=document.forms.fn_a.elements.subject,n=0;n<t.length;n++){
if(t[n].checked){
alert(t[n].value+"の"+document.forms.fn_a.elements.in_data.value+"さん");
break;
}
}
}

  • 2017/7/417:16:34

    IE無視していいなら

    function showMsg(){

    window.alert(document.forms["fn_a"].elements["subject"].value+"の"+document.forms["fn_a"].elements["in_data"].value+"さん");


    }

    で。

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

ベストアンサー以外の回答

1〜3件/3件中

並び替え:回答日時の
新しい順
|古い順

2017/7/621:47:40

まず、修正しなくてはならないことがあります。
FORM要素が1つでコーディングしているのだから、
その終端タグは、

</form>
</body>
</html>
これだけでいいです。

つまり、
<label><input type="reset"value="名前を消去"onClick="ckdel();"> </label> </p>
</form>

「ここの終端タグが余分なので削除してください」
ということ。

>ラジオボタンの経営学科を選んでいたとして、・・・
という条件でなら、

関数の手直しを、こうしましょう!

function showMsg(){
var fn_a = document.forms["fn_a"];
alert(fn_a.subject.value+" の "+fn_a.name.value+"さん");
}

nao********さん

2017/7/621:31:19

var a = 1, b;
というように変数を宣言して値も何も入っていない状態で

alert(b);

と呼び出すと undefined (=未定義)になります。

ちなみに aに1が入っているので undefinedにはならずに、

きちんと 1 と表示されます。

プロフィール画像

カテゴリマスター

2017/7/415:10:25

凡ミスです。
</form>
を2回閉じています。
前の
<label><input type="reset"value="名前を消去"onClick="ckdel();">
</label> </p>

の下の
</form>
を消してください。

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる