アプリ版：「スタンプのみでお礼する」機能のリリースについて

javascriptの計算結果をweb上に表示

解決済

  • 質問者：tajix14
  • 質問日時：
  • 回答数：1件

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 回答 (1件)

No.1ベストアンサー

  • 回答者： Gaffgarion
  • 回答日時：

msg.innerHTML = msg;


msg2.innerHTML = msg2;

の代わりに以下。

var p1 = document.getElementById('msg');
var p2 = document.getElementById('msg2');
if (p1.textContent !== undefined){
p1.textContent = msg;
p2.textContent = msg2;
}else{
p1.innerText = msg;
p2.innerText = msg2;
}


textContentとinnerTextは少し違いますが、あまり気にしなくてもいいかもしれません。詳しくは以下。

http://d.hatena.ne.jp/cou929_la/20110517/1305644 …


今回のtextContentと、あとクリックイベントの追加の部分は実装による違いで分岐をしていますが、
そういったところはjqueryなどのDOM操作補助ライブラリを使うと、随分とすっきりします。
    • good
    • 0
    • 件
通報する
この回答へのお礼

素早いご回答有難うございます。
お陰さまで当方の考えているものを作ることが出来ました。大変助かりました。本当にありがとうございました。

通報する
お礼日時：2013/02/16 17:54

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報