change value of an object with onchange jquery

user_9985264 0
Viewed 98

I have an object with the name of the filter that I want to change the amount within the object when a range slider changed

My HTML code is:

<input id="length" class="border-0" type="range" min="1" max="100"/>

and my jQuery:

function updateData() {
    var filter = {};
    filter.length = $('#length').val();
    return filter;
}

$('#length, #height, #capacity').change(function () {
   updateData();
   console.log(updateData())
});

Below code is not working and returns a number among 1 - 100

object css html jquery javascript
2 Answers

This should work - I refactored your code a little and added filter to the outer scope so that you can update the object depending on the different types. Updatedata now takes a type and a value and sets the object key and value depending on the target.

var filter = { length:0, height:0, capacity:0 };
function updateData(id, value) {
    filter[id] = value;
    return filter;
}

$('#length, #height, #capacity').change(function (e) {
    console.log( updateData(e.target.id, e.target.value) );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="length">Length</label>
<input id="length" class="border-0" type="range" min="1" max="100"/>
<label for="height">Height</label>
<input id="height" class="border-0" type="range" min="1" max="100"/>
<label for="capacity">Capicity</label>
<input id="capacity" class="border-0" type="range" min="1" max="100"/>

If you want the "live" value, see this Codepen example: https://codepen.io/juanbrujo/pen/uIqaw

user_13814260

Try this instead:

filter["length"] = $('#length').val();

This removes the chance you’re setting the actual length property - but you do have to access the property like so IIRC:

filter["length"]

IMO it would be easier to change the property name, but I’ve tried to keep it as similar to your code as possible.

user_102217650
Related