显示动态变量总数（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

labels里面的span和input 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>

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

Show total of dynamic variables (php and javascript)

javascript

php

variables

addition