自動計算 IEだと数字が表示されません。

自動計算をこちらで作ってもらったのですが、IE（エキスプローラ―）だと合計計算表示されません。
chromeはちゃんとできます。
どこを修正すれば、IEでも数字が表示できるようになるでしょうか？


<script>(function(_){
_ ; function R(d,s){for(var i in s) d[i]=s[i]; return d}
_ ; function N(n){return n.toString(10).replace(/(\d)(?=(?:\d\d\d)+$)/, "$1,")}
_ ; /// 価格表
_ ; var PRICES = { item1: {A:1000, B:2000, C:3000}, item2: {X:100, Y:200}, item3: {Y:500, N:0} };
_ ; /// 自動計算してるっぽく表示
_ ; function changeOutput(elem, value) {
_ ; _ ; if (elem.value == value) return;
_ ; _ ; R(elem.style, {transition:'opacity 0.2s', opacity: '0.0'});
_ ; _ ; window.setTimeout(function(){
_ ; _ ; _ ; elem.value = value;
_ ; _ ; _ ; R(elem.style, {transition:'opacity 0.2s', opacity: '1.0'});
_ ; _ ; }, 200);
_ ; }
_ ; /// 請求額を計算して表示
_ ; function displayAmount(form) {
_ ; _ ; var elem = form.elements, num = parseInt(elem['number'].value, 10);
_ ; _ ; var total = 0;
_ ; _ ; for (var i in PRICES) {
_ ; _ ; _ ; var p = PRICES[i], e = elem[i];
_ ; _ ; _ ; if (!e || !(e.value in p)) { total = NaN; break; }
_ ; _ ; _ ; total += p[e.value];
_ ; _ ; }
_ ; _ ; var price = (isNaN(num) || isNaN(total))? '-': N(num * total);
_ ; _ ; changeOutput(elem['total'], price + ' 円');
_ ; }
_ ; // ページ表示したら表示
_ ; window.addEventListener('DOMContentLoaded', function(){
_ ; _ ; displayAmount(document.forms['form1']);
_ ; }, false);
_ ; // 値を変えたら表示
_ ; window.addEventListener('change', function(ev){
_ ; _ ; var form = ev.target.form;
_ ; _ ; if (form && form.name == 'form1') displayAmount(form);
_ ; }, false);
})()</script>

<form name=form1><table border>
<thead><tr><th>項目 <th>内容
<tbody>
<tr><td>生地の種類 <td>
<label><input type=radio name=item1 value=A>A</label>
<label><input type=radio name=item1 value=B>B</label>
<label><input type=radio name=item1 value=C>C</label>
<tr><td>つばの形 <td>
<label><input type=radio name=item2 value=X>X</label>
<label><input type=radio name=item2 value=Y>Y</label>
<tr><td>裏地の有無 <td>
<label><input type=radio name=item3 value=Y>有</label>
<label><input type=radio name=item3 value=N>無</label>
<tr><td>注文数 <td>
<label><input type=radio name=number value=1>1</label>
<label><input type=radio name=number value=2>2</label>
<label><input type=radio name=number value=3>3</label>
<tr><td>合計 <td>
<output name=total></output>
</table></form>

質問者からの補足コメント

• 

  具体的にどう変えればいいか教えて頂けるとありがたいです。

    補足日時：2016/12/06 10:09

No.2 ベストアンサー 回答者： yambejp 回答日時： 2016/12/07 18:56

ざっとかきます

<script>
document.addEventListener('change',function(e){
calc();
});
function calc(){
var PRICES = { item1: {A:1000, B:2000, C:3000}, item2: {X:100, Y:200}, item3: {Y:500, N:0} };
var item1=PRICES["item1"][getRadioValue("item1")];
var item2=PRICES["item2"][getRadioValue("item2")];
var item3=PRICES["item3"][getRadioValue("item3")];
var num =getRadioValue("number");
if(item1!=undefined & item2!=undefined & item3!=undefined & num!=null){
document.getElementsByName('total')[0].innerHTML=(item1+item2+item3)*num;
}
}
function getRadioValue(v){
var n=document.getElementsByTagName('input');
for(var i=0;i<n.length;i++){
if(n[i].type=="radio" && n[i].name==v && n[i].checked){
return n[i].value;
}
}
return null;
}
</script>
<form name=form1><table border>
<thead><tr><th>項目 <th>内容
<tbody>
<tr><td>生地の種類 <td>
<label><input type="radio" name="item1" value="A">A</label>
<label><input type="radio" name="item1" value="B">B</label>
<label><input type="radio" name="item1" value="C">C</label>
<tr><td>つばの形 <td>
<label><input type="radio" name="item2" value="X">X</label>
<label><input type="radio" name="item2" value="Y">Y</label>
<tr><td>裏地の有無 <td>
<label><input type="radio" name="item3" value="Y">有</label>
<label><input type="radio" name="item3" value="N">無</label>
<tr><td>注文数 <td>
<label><input type="radio" name="number" value="1">1</label>
<label><input type="radio" name="number" value="2">2</label>
<label><input type="radio" name="number" value="3">3</label>
<tr><td>合計 <td>
<output name="total"></output>
</table></form>

この回答へのお礼

ありがとうございます！できました！！

お礼日時：2016/12/23 20:52

No.1 回答者： yambejp 回答日時： 2016/12/05 16:38

ラジオボタンのDOM処理がおかしくないですか？

<script>
document.addEventListener('change',function(e){
console.log(document.querySelector('[name=hoge]:checked').value);
});

</script>
<input type="radio" name="hoge" value="1">1<br>
<input type="radio" name="hoge" value="2">2<br>
<input type="radio" name="hoge" value="3">3<br>

チェックされたものvalueを拾わないといけません