user input as javascript variable

Question

I have written a small function in javascript to get user input from a text input form to be used as the delay time for fading away but it fails please help

<input type="text" class="form-control" id="new" placeholder="Fade Duration(milliseconds)"/>

var x = document.getElementById("new").value;
$(".fadeInbox").click(function () {
    $("#section1").delay(x).fadeIn();
    $("#section2").delay(x).fadeIn();
});



$(".fadeOutbox").click(function () {
    $("#section1").delay(x).fadeOut();
    $("#section2").delay(x).fadeOut();

});

Answer 1

var x from input is a string not a int , so

var x = parseInt(document.getElementById("new").value);
...

or

var x = +document.getElementById("new").value;
...

Answer 2

You should put the

var x = document.getElementById("new").value;

inside the functions, or it will be executed only once immediately after the script loads (and not work).

Answer 3

The delay should be checked inside the functions, otherwise the value will be checked only once - when the page loads. If it's inside the functions it will be checked every time the function is triggered.

$(".fadeInbox").click(function () {
    var x = document.getElementById("new").value;
    $("#section1").delay(x).fadeIn();
    $("#section2").delay(x).fadeIn();
});

$(".fadeOutbox").click(function () {
    var x = document.getElementById("new").value;
    $("#section1").delay(x).fadeOut();
    $("#section2").delay(x).fadeOut();
});