Compress JS

Development Web Development
, ,
1

I’m having one of those days right now… I’m just looking to do something simple, but my brain is just constantly farting right now… Can anyone think of a way to compress this chunk of JS?

slider0.on('update', function(values){
	document.getElementById( 'min' + list[0][0] ).setAttribute('value', values[0]);
	document.getElementById( 'max' + list[0][0] ).setAttribute('value', values[1]);	
});


slider1.on('update', function(values){
	document.getElementById( 'min' + list[1][0] ).setAttribute('value', values[0]);
	document.getElementById( 'max' + list[1][0] ).setAttribute('value', values[1]);	
});


slider2.on('update', function(values){
	document.getElementById( 'min' + list[2][0] ).setAttribute('value', values[0]);
	document.getElementById( 'max' + list[2][0] ).setAttribute('value', values[1]);	
});


slider3.on('update', function(values){
	document.getElementById( 'min' + list[3][0] ).setAttribute('value', values[0]);
	document.getElementById( 'max' + list[3][0] ).setAttribute('value', values[1]);	
});


slider4.on('update', function(values){
	document.getElementById( 'min' + list[4][0] ).setAttribute('value', values[0]);
	document.getElementById( 'max' + list[4][0] ).setAttribute('value', values[1]);	
});

The original way I wrote it, you just wouldn’t believe, today is such a sh**ty day, I may as well be brain dead right now! :joy:

2

AFK but use DRY, write your function just once.

3

This is what I mean by one of those days, I originally did do it that way, couldn’t work out why it didn’t work, then I just said screw it and did it this way.

I kinda worked out why it didn’t work, because as I was assigning the listener function in a loop, it would then only work for the last one, and it would only update for the last one ‘list index[4][0]’.

Obviously tis me being dense. I’ve done far more advanced things in the past, like I said, it’s just one of those days, it’s not even something that needs to be done any time soon, I’m sure I’ll fix it at some point! :joy:

4

Well, its pretty much definition of Friday (already afternoon for me).

1 Like
5

If it was dmy off day I may have given it a go but I’m at work. Maybe someone else can chime in.

6

give the sliders a class and then when you call the update function it one loop pass it this.id to determine which slider to fire the call back.

7

In some situations you can rejig variables or use loops instead of having to write functions/classes.

var sliders = [slider0, slider1, slider2, slider3];

sliders.forEach(function(slider, index) {
	slider.on('update', function(values){
		document.getElementById( 'min' + list[index][0] ).setAttribute('value', values[0]);
		document.getElementById( 'max' + list[index][0] ).setAttribute('value', values[1]);	
	});
});