CODEWITHSUNDEEP
javascripthtml
larpo
larpo

Reputation: 1163

Update two <outputs> from a range slider

Grateful for help updating two different values from a range slider and a hidden field value.

This currently updates the fee output perfectly and shows the total output before any slider value change but when the slider is users the second output shows ie. "undefined300" where 300 is the slider value. It is not adding the hidden field value basically. Sure I'm doing something stupid. 

<input type="range" min="0" max="100" value="50" id="fee" step="1" oninput="outputUpdate(value)">
<input type="hidden" id="subTotal" value="1000" />

$<output for="fee" id="fee"> </output>

$<output for="fee subTotal" id="total"> </output>

<script>
    function outputUpdate(fee, subTotal) {
        document.querySelector('#fee').value = fee;
        document.querySelector('#subTotal').value = subTotal;
        var total = +subTotal + +fee
        document.querySelector('#total').value = total;
    }
</script>

Upvotes: 0

Views: 309

Answers (1)

Drakes
Drakes

Reputation: 23660

You are calling outputUpdate(value) but your function takes two parameters as it is outputUpdate(fee, subTotal){ ... }, so subTotal will be "undefined". There are other problems too.

Try this updated script:

<script>
function outputUpdate(fee) {
    document.querySelector('#fee').value = fee;
    var subTotal = document.querySelector('#subTotal').value;
    var total = parseInt(subTotal) + parseInt(fee);
    document.querySelector('#total').value = total;
}
</script>

Demo: http://jsbin.com/pudequ/1/

Upvotes: 1

Related Questions