特定の条件に合うテキストフィールドに入力された値のみ加算する

説明

特定の条件に合うテキストフィールドを読み出すには、いくつか方法があります。最も簡単なものはテキストフィールドのname属性またはid属性で名前と番号の組み合わせを利用してアクセスする方法です。この方法であればfor()を使って簡単に名前と番号の組み合わせのテキストフィールドを参照することができます。
また、スタイルシートのクラス名に処理したいものを指定する方法もあります。この場合は正規表現のmatch()を使って対象となるクラスが適用されているかどうか調べて処理を行います。
JavaScriptテクニック ブック 　詳しい解説などはJavaScriptテクニック ブックを参照してください。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>特定の条件に合うテキストフィールドに入力された値のみ加算する</h1>
<form action="./calc.cgi" method="get" id="mainForm" name="mainForm">
商品1：<input type="text" name="num1" id="num1" value="1" size=3">個×
<input type="text" name="price1" id="price1" value="300">円<br>
商品2：<input type="text" name="num2" id="num2" value="2" size=3">個×
<input type="text" name="price2" id="price2" value="100">円<br>
商品3：<input type="text" name="num3" id="num3" size=3">個×
<input type="text" name="price3" id="price3" value="150">円<br>
<input type="text" name="total" id="total" >円<hr>
特　記：<input type="text" name="userSpec" id="userSpec"><br>
ご意見：<input type="text" name="userComment" id="userComment"><br>
<input type="button" id="calcButton" value="計算">
</form>
<div id="result">結果：</div>
</body>
</html>
window.onload = function(){
document.getElementById("calcButton").onclick = function(){
var totalPrice = 0;
for (var i=1; i<=3; i++){
var num = parseInt(document.getElementById("num"+i).value) || 0;
var prc = parseInt(document.getElementById("price"+i).value) || 0;
totalPrice += num * prc;
}
document.getElementById("total").value = totalPrice;
}
}