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

Question

I am trying to create an HTML5 slider calculator.

I have created two sliders with different ranges, initial values and step sizes. The two sliders are setup to update the value on the fly as the user moves the slider left and right. The problem is that my first slider updates the second sliders value, but the value of the first slider remains fixed.

The code is as follows:

                                    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>';

This is in PHP.

The live version of the page can be seen at: http://forestlakechev.staging.wpengine.com/inventory/2015/Chevrolet/Cruze/MN/Forest%20Lake/1G1PA5SH0F7130316/?

Next to the vehicle image is some tabbed content. Click on the finance tab and you will see the sliders.

Thank you for your help!

Jared

Answer 1

In JavaScript, when multiple functions have the same name, only the last one to be declared is run. Notice that both JS functions in your code share the same name. Your second outputUpdate() function is overriding the first, so only #term is getting updated. Make sure the functions have different names.