Question

我正在尝试创建一个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中。

页面的实时版本可在以下位置查看：http://forestlakechev.staging.wpengine.com/inventory/2015/Chevrolet/Cruze/MN/Forest%20Lake/1G1PA5SH0F7130316/？

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

感谢您的帮助！

贾里德

Answer 1

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

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

1 个答案: