显示动态变量的总数（php 和 javascript）

Question

我有一个包含 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

标签内的 span 和输入 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>