ダイナミック変数（phpとjavascript）の合計を表示

Question

私は、以下のコードのように$ target値を設定する2つの範囲入力を含むフォームを持っています。スライダごとに保存された値は最初に表示されますが、javascriptは範囲スライダの移動に伴って新たに選択された値を表示します。

私は現在、2つのレンジ入力を動的に表示しようとしています。つまり、格納された値に基づいて合計を表示します。ただし、レンジスライダが移動された場合、合計も動的に変更する必要があります。

<label for="monday">Monday - $<span id="monday"><?php echo number_format($set_monday) ?> </span></label> 
<?php if (!empty($set_monday)) { ?> 
<input type="range" min="0" max="5000" id="monday" name="monday" value=<?php echo $set_monday ?> step="100" oninput="showValue1(this.value)" /> 
<?php } else { ?> 
<input type="range" min="0" max="5000" id="monday" name="monday" value="0" step="50" oninput="showValue1(this.value)" /> 
<?php } ?> 
<script type="text/javascript"> function showValue1(newValue) { document.getElementById("monday").innerHTML=newValue;} </script> 


<label for="tuesday">Tuesday - $<span id="tuesday"><?php echo number_format($set_tuesday) ?></span></label> 
<?php if (!empty($set_tuesday)) { ?> 
<input type="range" min="0" max="5000" id="tuesday" name="tuesday" value=<?php echo $set_tuesday ?> step="100" oninput="showValue2(this.value)" /> 
<?php } else { ?> 
<input type="range" min="0" max="5000" id="tuesday" name="tuesday" value="0" step="50" oninput="showValue2(this.value)" /> 
<?php } ?> 
<script type="text/javascript"> function showValue2(newValue) { document.getElementById("tuesday").innerHTML=newValue;} </script> 


<label>Total Target = $ 
<?php 
$sum_total = $set_monday + $set_tuesday; 
echo number_format($sum_total); 
?> 
</label> 

関数の出力を追加したり、PHPやJavaScriptの変数を追加する方法がわかりません。だれでも助けてくれますか？

Answer 1

ラベル内のスパンと入力IDが同じで間違っています。 HTML要素に一意のIDがあることを確認します。また、合計を動的に計算するにはjavascriptが必要です。これに基づいて、コードは次のようになります。

<label for="monday">Monday - $<span id="monday"><?php echo number_format($set_monday) ?> </span></label> 
<?php if (!empty($set_monday)) : ?> 
<input type="range" min="0" max="5000" id="mondayRange" name="monday" value=<?php echo $set_monday ?> step="100" oninput="showValue(this)" /> 
<?php else : ?> 

<input type="range" min="0" max="5000" id="mondayRange" name="monday" value="0" step="50" oninput="showValue(this)" /> 
<?php endif; ?> 

<label for="tuesday">Tuesday - $<span id="tuesday"><?php echo number_format($set_tuesday) ?></span></label><br> 
<?php if (!empty($set_tuesday)) : ?> 
<input type="range" min="0" max="5000" id="tuesdayRange" name="tuesday" value=<?php echo $set_tuesday ?> step="100" oninput="showValue(this)" /> 
<?php else : ?> 
<input type="range" min="0" max="5000" id="tuesdayRange" name="tuesday" value="0" step="50" oninput="showValue(this)" /> 
<?php endif; ?> 


<label id="total">Total Target = $ 
<?php 
$sum_total = $set_monday + $set_tuesday; 
echo number_format($sum_total); 
?> 
</label> 

<script type="text/javascript"> 
    function showValue(range) 
    { 
     var sum = parseInt(document.getElementById('mondayRange').value) + parseInt(document.getElementById('tuesdayRange').value); 

     document.getElementById(range.id.substr(0, range.id.length - 5)).innerHTML = range.value; 
     document.getElementById('total').innerHTML = 'Total Target = $' + sum; 
    } 
</script>