CODEWITHSUNDEEP
javascriptjqueryhtml
dmn8
dmn8

Reputation: 19

user input as javascript variable

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();

});

Upvotes: 1

Views: 90

Answers (3)

Dropout
Dropout

Reputation: 13866

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();
});

Upvotes: 0

Alex
Alex

Reputation: 23310

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).

Upvotes: 0

void
void

Reputation: 36703

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;
...

Upvotes: 1

Related Questions