Php 带有2个滑块的HTML5滑块计算器

我正在尝试创建一个HTML5滑块计算器

我创建了两个不同范围、初始值和步长的滑块。这两个滑块设置为在用户左右移动滑块时动态更新值。问题是，我的第一个滑块更新了第二个滑块的值，但第一个滑块的值保持不变

代码如下：

                                    echo 'Calculate Your Payments:';
                                echo '<div id="rate-block">';
                                echo '<label for="rate_slider">Rate</label>';
                                echo '<input type="range" min="0" max="12" value="5.9" id="rate_slider" step="0.1" oninput="outputUpdate(value)"/>';
                                echo ' <output for="rate_slider" id="rate">5.9</output> APR';
                                echo '<script>';
                                echo 'function outputUpdate(rateVal) {';
                                echo 'document.querySelector(\'#rate\').value = rateVal;';
                                echo '}';
                                echo '</script>';
                                echo '</div>';

                                echo '<div id="term-block">';
                                echo '<label for="term_slider">Term</label>';
                                echo '<input type="range" min="12" max="84" value="60" id="term_slider" step="12" oninput="outputUpdate(value)"/>';
                                echo ' <output for="term_slider" id="term">60</output> Months';
                                echo '<script>';
                                echo 'function outputUpdate(termVal) {';
                                echo 'document.querySelector(\'#term\').value = termVal;';
                                echo '}';
                                echo '</script>';
                                echo '</div>';

这是用PHP编写的

该页面的实时版本可在以下位置查看：

车辆图像旁边是一些选项卡式内容。单击finance选项卡，您将看到滑块

谢谢你的帮助

---

Jared

在JavaScript中，当多个函数具有相同的名称时，只运行最后一个要声明的函数。请注意，代码中的两个JS函数共享相同的名称。您的第二个outputUpdate函数将覆盖第一个函数，因此只更新了一个术语。确保函数具有不同的名称