Vivian Hinch Vivian Hinch - 1 month ago 13
HTML Question

Input box in an HTML file that controls a number in a JS file

I have a JS file with a function that looks like this:

function Animation(options) {
defaultOptions = {
'direction' : 'clockwise',
'propertyName' : null,
'propertyValue' : null,
'duration' : 15,
'repeat' : null,
'callbackFinished' : null,
'callbackBefore' : null,
'callbackAfter' : null,
}
...


...and then it continues onto the rest of the animation, using those values.

Let's say I wanted to have an input box inside of an html file that directly changed one of those values, how would I go about doing that?

I'd just need it to work so if you placed "24" into the input box and pressed a button, it would set 'duration' to 24. Then when you refreshed the .html file and triggered the animation, it would have a duration of 24.

Is this possible? If not, is there another way to achieve what I want?

Answer

Sure you can do that !

In my snippet, if you fill the input it will override the default options, but if you let it empty it will keep 15 as defaults.

Hope this helps !

function Animation(options) {
  defaultOptions = {       
    'direction'         : 'clockwise',         
    'propertyName'      : null,                
    'propertyValue'     : null,                
    'duration'          : options.duration || 15,                                 
    'repeat'            : null,                                     
    'callbackFinished'  : null,                
    'callbackBefore'    : null,                
    'callbackAfter'     : null,           
  };
  alert('duration is : ' + defaultOptions.duration);
};

function callAnimation() {
  var input = document.getElementById('animationDuration');
  Animation({duration: input.value});  
};
<input type="number" step="1" id="animationDuration">
<button onclick="callAnimation()">Confirm</button>