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>
****************************************************************
お礼
ご解答ありがとうございます。 希望通りの結果が得られました。 ありがとうございます。