みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

javascriptによる計算

テキストボックス「a1~6」の値とテキストボックス「b1~6」に入力された値を足し算してテキストボックス「c1~6」(例…c[i] = a[i] + b[i])を計算するJavaScriptを作成しているのですが、結果がundefinedになってしまい上手くいきません。どうやったら動くのかどうかご教授ください。
以下ソース↓

<script language ="JavaScript">
function plus()
{
var intResult = 0;
for (i=1; i<=6; i++){
intResult[i] = 0;
if (!isNaN(document.forms["A"].all["a"+i].value) && !isNaN(document.forms["B"].all["b"+i].value)){
intResult[i] += parseInt(document.forms["A"].all["a"+i].value);
intResult[i] += parseInt(document.forms["B"].all["b"+i].value);
}

<table border = 1>
<tr>
<td>
<table border = 1>
<tr>
<td>
<form name="A">
<input type = "text" size = 5 name = "a1"></input>
</td>
<td>
<input type = "text" size = 5 name = "a2"></input>
</td>
<td>
<input type = "text" size = 5 name = "a3"></input>
</td>
</tr>
<tr>
<td>
<input type = "text" size = 5 name = "a4"></input>
</td>
<td>
<input type = "text" size = 5 name = "a5"></input>
</td>
<td>
<input type = "text" size = 5 name = "a6"></input>
</form>
</td>
</tr>
</table>
</td>
<td>
<table boeder = 1>
<tr>
<input type = "button" onClick="plus()" value = "+"></input>
</tr>
</table>
</td>
<td>
<table border = 1>
<tr>
<td>
<form name = "B">
<input type = "text" size = 5 name = "b1"></input>
</td>
<td>
<input type = "text" size = 5 name = "b2"></input>
</td>
<td>
<input type = "text" size = 5 name = "b3"></input>
</td>
</tr>
<tr>
<td>
<input type = "text" size = 5 name = "b4"></input>
</td>
<td>
<input type = "text" size = 5 name = "b5"></input>
</td>
<td>
<input type = "text" size = 5 name = "b6"></input>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>

答え
<form name = "C">
<table border = 1>
<tr>
<td>
<input type = "text" size = 5 name = "c1"></input>
</td>
<td>
<input type = "text" size = 5 name = "c2"></input>
</td>
<td>
<input type = "text" size = 5 name = "c3"></input>
</td>
</tr>
<tr>
<td>
<input type = "text" size = 5 name = "c4"></input>
</td>
<td>
<input type = "text" size = 5 name = "c5"></input>
</td>
<td>
<input type = "text" size = 5 name = "c6"></input>
</td>
</tr>
</table>
</form>
</body>

document.C.all["c"+i].value = intResult[i];
}
}
</script>

投稿日時 - 2007-11-15 00:50:18

QNo.3519050

すぐに回答ほしいです

質問者が選んだベストアンサー

==========================Q3519050-1.html==================
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Q3519050 TestCase 2</title>
<script type="text/javascript" src="Q3519050-1.js"></script>
</head>
<body>
<!--
個人的な都合で

name属性でなくid属性を使うように変更。
a1~a6でなくa0~a5にした。
またtableのネストが嫌いなので元の形にはしていない。

-->
<h1>Q3517253 TestCase 1</h1>
<h2>Operand1</h2>
<table>
<tr>
<td>
<input type="text" id="a0" />
</td>
<td>
<input type="text" id="a1" />
</td>
<td>
<input type="text" id="a2" />
</td>
</tr>
<tr>
<td>
<input type="text" id="a3" />
</td>
<td>
<input type="text" id="a4" />
</td>
<td>
<input type="text" id="a5" />
</td>
</tr>
</table>
<h2>Operand2</h2>
<table>
<tr>
<td>
<input type="text" id="b0" />
</td>
<td>
<input type="text" id="b1" />
</td>
<td>
<input type="text" id="b2" />
</td>
</tr>
<tr>
<td>
<input type="text" id="b3" />
</td>
<td>
<input type="text" id="b4" />
</td>
<td>
<input type="text" id="b5" />
</td>
</tr>
</table>
<h2>Run</h2>
<p><input type="button" value="各項目を足す" onclick="plus();" /></p>
<h2>Results</h2>
<table>
<tr>
<td>
<input type="text" id="c0" />
</td>
<td>
<input type="text" id="c1" />
</td>
<td>
<input type="text" id="c2" />
</td>
</tr>
<tr>
<td>
<input type="text" id="c3" />
</td>
<td>
<input type="text" id="c4" />
</td>
<td>
<input type="text" id="c5" />
</td>
</tr>
</table>
</body>
</html>
===================Q3519050-1.js================
function plus(){
var intResult = new Array(6);
var i;
for (i=0; i<=5; i++){
intResult[i-1] = 0; /* 最大の敗因。ArrayじゃなきゃいけないものにNumberを代入してどーすんの? */
/* 空文字は0としてみなされるようだ */
if (!isNaN(document.getElementById("a" + i.toString()).value) && !isNaN(document.getElementById("b" + i.toString()).value)){
/* parseIntからNumberに変更。parseIntを使いたかったら条件の変更が必要 */
intResult[i-1] += Number(document.getElementById("a" + i.toString()).value);
intResult[i-1] += Number(document.getElementById("b" + i.toString()).value);
}
document.getElementById("c" + i.toString()).value = intResult[i-1];
}
}

投稿日時 - 2007-11-15 02:02:39

お礼

そうですね!配列定義するのを忘れていました…。
おかげで無事動きました!ありがとうございます!

投稿日時 - 2007-11-18 22:00:28

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

テキストボックスの命名を考え直します
同じ系統の a1-a6をtxtA、b1-b6をtxtB、c1-c6をtxtCとします
添え字はつけないようにします

 <tr>
   <td><input type=text name=txtA></td> <!-- txtA[0] -->
   <td><input type=text name=txtA></td> <!-- txtA[1] -->
   <td><input type=text name=txtA></td> <!-- txtA[2] -->
 </tr>
 <tr>
   <td><input type=text name=txtA></td> <!-- txtA[3] -->
   <td><input type=text name=txtA></td> <!-- txtA[4] -->
   <td><input type=text name=txtA></td> <!-- txtA[5] -->
 </tr>

演算関数
function plus() {
  var objA, objB;
  var flagA, flagB;
  var n;
  for( n=0; n < 6; n++ ) {
    // テキストボックスのデータを取得
    objA = document.A.txtA[i].value;
    objB = document.B.txtB[i].value;
    // 数値かどうかのチェック
    flagA = !isNaN( Number( objA ) ) && ( objA != "" );
    flagB = !isNaN( Number( objB ) ) && ( objB != "" );
    // 双方数値なら演算 & 答えの記入
    if ( flagA && flagB ) {
      document.C.txtC[i] = parseInt( objA ) +
        parseInt( objB );
    }
  }
}

# 字下げは全角スペースです ・・・

投稿日時 - 2007-11-15 02:00:51

あなたにオススメの質問