このフィドルを見てください：
またはここに完全なマークアップがあります
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calculator</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.header {
font-size: 10pt;
color: white;
font-weight: 700;
text-decoration: none;
text-underline-style: none;
text-line-through: none;
font-family: Arial;
border-top: .5pt solid #C4D79B;
border-right: none;
border-bottom: .5pt solid #C4D79B;
border-left: .5pt solid #C4D79B;
background: #9BBB59;
mso-pattern: #9BBB59 none;
padding: 5px;
display: block;
width:138px;
text-align: center;
}
.drop {
width: 150px;
}
</style>
</head>
<body>
<script type="text/javascript">
function calculate() {
// 'improve' Math.round() to support a second argument
var _round = Math.round;
Math.round = function (number, decimals /* optional, default 0 */ ) {
if (arguments.length == 1)
return _round(number);
var multiplier = Math.pow(10, decimals);
return _round(number * multiplier) / multiplier;
}
/* examples
Math.round('123.4567', 2); // => 123.46
Math.round('123.4567'); // => 123
*/
msfPlanA = 25.00;
msfPlanB = 50.00;
msfPlanC = 79.99;
minPlanA = 500;
minPlanB = 1700;
minPlanC = 3000;
smsPlanA = 200;
smsPlanB = 600;
smsPlanC = 1000;
dataPlanA = 100;
dataPlanB = 250;
dataPlanC = 500;
plan = document.getElementById("plans").options.value;
days = document.getElementById("days").options.value;
if (plan == "Plan A") {
document.getElementById("msf").value = ('$' + Math.round(msfPlanA / 30 * days, 2));
document.getElementById("min").value = (Math.floor(minPlanA / 30 * days) + ' minutes');
document.getElementById("sms").value = (Math.floor(smsPlanA / 30 * days) + ' texts');
document.getElementById("data").value = (Math.floor(dataPlanA / 30 * days) + ' MBs');
} else if (plan == "Plan B") {
document.getElementById("msf").value = ('$' + Math.round(msfPlanB / 30 * days, 2));
document.getElementById("min").value = (Math.floor(minPlanB / 30 * days) + ' minutes');
document.getElementById("sms").value = (Math.floor(smsPlanB / 30 * days) + ' texts');
document.getElementById("data").value = (Math.floor(dataPlanB / 30 * days) + ' MBs');
} else {
document.getElementById("msf").value = ('$' + Math.round(msfPlanC / 30 * days, 2));
document.getElementById("min").value = (Math.floor(minPlanC / 30 * days) + ' minutes');
document.getElementById("sms").value = (Math.floor(smsPlanC / 30 * days) + ' texts');
document.getElementById("data").value = (Math.floor(dataPlanC / 30 * days) + ' MBs');
}
}
</script>
<form action="">
<table>
<tbody>
<tr>
<td> <span class="header">How many days?</span>
</td>
<td> <span class="header">Which plan?</span>
</td>
</tr>
<tr>
<td width="120px">
<select class="drop" id="days">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
</select>
</td>
<td>
<select class="drop" id="plans">
<option value="Plan A">Plan A</option>
<option value="Plan B">Plan B</option>
<option value="Plan C">Plan C</option>
</select>
</td>
<td>
<input type="button" value="Submit" onclick="calculate()" />
</td>
</tr>
</tbody>
</table>
<br />
<br />
<table>
<tbody>
<tr>
<td> <span class="header">Prorated MSF</span>
</td>
<td> <span class="header">Minutes</span>
</td>
<td> <span class="header">SMS</span>
</td>
<td> <span class="header">Data</span>
</td>
</tr>
<tr>
<td>
<input size="19" type="text" id="msf" value="Prorated MSF" readonly="readonly" />
</td>
<td>
<input size="19" type="text" id="min" value="Prorated Minutes" readonly="readonly" />
</td>
<td>
<input size="19" type="text" id="sms" value="Prorated SMS" readonly="readonly" />
</td>
<td>
<input size="19" type="text" id="data" value="Prorated Data" readonly="readonly" />
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
IE と Opera では正常に動作しますが、Chrome、Safari、Firefox では動作しません。Chrome、Safari、FirefoxNaNでは、実際の値の代わりに取得します。提案？
これを 5 つの主要なブラウザーすべてで機能させる必要があります。
前もって感謝します！