javascriptの計算結果をweb上に表示
WEB上で入力した数値から複数の計算をさせ、それをフォームからcgiに送るjavascriprを組みたいと思っています。
【現在保有のスクリプト】
下記のスクリプト1では、text1 text2 欄に数値を入力した後、「計算」ボタンを押し、送信ボタンを押すと、計算結果をcgiに送ることが可能です。
（下記の場合は、「入力数値の和」と「積」の2つの数値の送信する)
【やりたいこと】
text1 text2 欄に数値を入力した後、「計算」ボタンを押したあとに、「和と積がブラウザ上に表示され、確認した後に「送信ボタン」を押せるようにしたい。
ということで、修正したのがスクリプト2です。
【質問事項】
スクリプト2では、スクリプト1をベースに
javascript上に
msg.innerHTML = msg;
msg2.innerHTML = msg2;
を加え、
HTML上に
<p id="msg"></p>
<p id="msg2"></p>
を加えていますが、これでは動きません。
上記に加え
function readText() {
var text1 = document.getElementById("");
などのパーツを入力する必要があるはずだと思うのですが、いろいろな場所に試行錯誤しておりますが、うまくいきません。
ご教示いただきたくお願いいたします。
【スクリプト1】************************************************
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<script type="text/javascript">
<!--
//@cc_on
document./*@if(1) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'click', function( evt )
{
var t = evt./*@if(1) srcElement @else@*/ target /*@end@*/
var v1, v2, msg, sum, msg2, sum2;
if( t.type == 'button' && t.name == 'calc' && t.form.id == 'form2' ) {
v1 = t.form.elements['text1'].value;
v2 = t.form.elements['text2'].value;
if ( isNaN( v1 ) || v1 == '' || isNaN( v2 ) || v2 == '' ) {
msg = '数字以外の文字が入ってます';
} else {
sum = parseFloat( v1 ) * parseFloat( v2 );
msg = '積は、' + sum + 'です';
sum2 = parseFloat( v1 ) + parseFloat( v2 );
msg2 = '和は、' + sum2 + 'です';
}
t.form.elements['plus'].value = msg;
t.form.elements['plus2'].value = msg2;
}
}, false );
//-->
</script>
</head>
<body>
<form action="form30.cgi" method="post" name="form2" id="form2">
<fieldset>
<input type="text" id="text1" name="text1" size="10" maxlength="10" />+
<input type="text" id="text2" name="text2" size="10" maxlength="10" />
<input type="button" value="計算" name="calc" />
<br>
<input type="hidden" name="plus" value="">
<input type="hidden" name="plus2" value="">
<input type="submit" value="送信" />
</fieldset>
</form>
</body>
</html>
****************************************************************
【スクリプト2】上記を改造しweb上で計算結果を表示させたい********
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<script type="text/javascript">
<!--
//@cc_on
document./*@if(1) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'click', function( evt )
{
var t = evt./*@if(1) srcElement @else@*/ target /*@end@*/
var v1, v2, msg, sum, msg2, sum2;
if( t.type == 'button' && t.name == 'calc' && t.form.id == 'form2' ) {
v1 = t.form.elements['text1'].value;
v2 = t.form.elements['text2'].value;
if ( isNaN( v1 ) || v1 == '' || isNaN( v2 ) || v2 == '' ) {
msg = '数字以外の文字が入ってます';
} else {
sum = parseFloat( v1 ) * parseFloat( v2 );
msg = '積は、' + sum + 'です';
sum2 = parseFloat( v1 ) + parseFloat( v2 );
msg2 = '和は、' + sum2 + 'です';
}
t.form.elements['plus'].value = msg;
t.form.elements['plus2'].value = msg2;
msg.innerHTML = msg;
msg2.innerHTML = msg2;
}
}, false );
//-->
</script>
</head>
<body>
<form action="form30.cgi" method="post" name="form2" id="form2">
<fieldset>
<input type="text" id="text1" name="text1" size="10" maxlength="10" />+
<input type="text" id="text2" name="text2" size="10" maxlength="10" />
<input type="button" value="計算" name="calc" />
<br>
<input type="hidden" name="plus" value="">
<input type="hidden" name="plus2" value="">
<p id="msg"></p>
<p id="msg2"></p>
<input type="submit" value="送信" />
</fieldset>
</form>
</body>
</html>
****************************************************************
補足
年末年始でバタバタしていてお礼をいうのが遅くなってすいません。すぐにお返事くださってありがとうございました。 ２度目の回答後実施してみたのですが、できません。何かまちがっているのでしょうか？？ A href="javaScript:void(0)"の「void(0)」のせいでしょうか？あとスクロール表示するにはどうしたらいいのかも教えてください。 何度も何度もすいません・・・ｍ（．＿．）ｍ ペコッ