trying to pass a value dynamically into an input element

Question

I am trying to create some sort of set animation, so i.e. 100 then after 300ms show 97, then after 200ms show 110, etc.

I would like to be totally undependable on that input field (it would be thrown out at one point), So how would I able to just use an array of set numbers with a constant delay where the animation plays out the speed based on the numbers in the array and delaying after each number by the delay constant (let's say 300ms.)

Thanks.

I've tried to select the element and apply a set value like this: $("#myValues").myfunc({divFact:20,eventListenerType:'keyup'}).val(100), but it just places the number there with no result, it's using eventListenerType:'keyup' and my val function is def. not sending a keyup after the 100.

Here is a Fiddle

jsfiddle.net/pranavcbalan/nLLbus47/1

Pranav C Balan
– Pranav C Balan

2016-11-07 17:13:30 +00:00
Commented Nov 7, 2016 at 17:13 — Pranav C Balan
– Pranav C Balan, Commented Nov 7, 2016 at 17:13

empiric · Accepted Answer · 2016-11-07 17:23:33Z

1

You can iterate over an array and set the value of the input field depending of the value in the index:

$("#myValues").myfunc({
  divFact: 10
});

var time = 0;
$.each([ 100, 90, 80, 70 ], function( index, value ) {
 setTimeout( function(){ $("#myValues").val(value).change(); }, time)
 time += 1000;
});

To delay each iteration you could use a setTimeout-function wrapped around the setter of the value.

I removed the keyUp event as the plugin has a default value for eventListenerType you can use, but this has to be triggered.

Set the initial value of time to any value you want when you want to delay the first iteration as well.

Example

answered Nov 7, 2016 at 17:23

empiric

7,8767 gold badges40 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pranav C Balan · Accepted Answer · 2016-11-07 17:27:13Z

1

There are 2 problems,

The plugin not returning the object reference in the plugin code so you can't change the value using val() method.
The val() method doesn't trigger the keyup event you need to trigger it programmatically.

You can either add code for returning the object reference or do it like.

var $ele = $("#myValues"); // cache the reference
$ele.myfunc({divFact:20,eventListenerType:'keyup'}); // initialize plugin
$ele.val(100).keyup(); // change value and trigger the event

Working Example

edited Nov 7, 2016 at 17:27

answered Nov 7, 2016 at 17:15

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

Comments

Mark Walet · Accepted Answer · 2016-11-08 08:52:49Z

0

I have changed 2 things in your jsfiddle:

I added a speed parameter to the changePosition method.
I return this at the end of the object initializer.

With some other possible minor improvements. See my jsfiddle

Edit: I did it this way because you wanted to get the input field out of it. This is the way.

edited Nov 8, 2016 at 8:52

answered Nov 7, 2016 at 17:33

Mark Walet

1,21611 silver badges23 bronze badges

Collectives™ on Stack Overflow

trying to pass a value dynamically into an input element

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related