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

});

change var x = document.getElementById("new").value; to var x = Number(document.getElementById("new").value); — Apb
– Apb, Commented Nov 19, 2015 at 11:51
The value property of an HTMLInputElement returns a string — Andreas
– Andreas, Commented Nov 19, 2015 at 11:53
if you are using jQuery, it would be easier to get the value with var x = $("#new").val();, writing much less — Zander
– Zander, Commented Nov 19, 2015 at 13:07
Does any of the answers solve your problem? If so, please select the right answer. — Dropout
– Dropout, Commented Nov 25, 2015 at 9:18

void · Accepted Answer · 2015-11-19 11:49:08Z

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

answered Nov 19, 2015 at 11:49

void

36.7k10 gold badges71 silver badges111 bronze badges

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

3 Comments

dmn8 Over a year ago

i moved var x = document.getElementById("new").value; into the two functions and solved my problem

void Over a year ago

Even then you should make them int

dmn8 Over a year ago

will definately do that

Alex · Accepted Answer · 2015-11-19 13:05:59Z

0

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

answered Nov 19, 2015 at 13:05

Alex

23.3k4 gold badges43 silver badges76 bronze badges

Comments

Dropout · Accepted Answer · 2015-11-19 13:08:32Z

0

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

answered Nov 19, 2015 at 13:08

Dropout

14k10 gold badges59 silver badges112 bronze badges

Collectives™ on Stack Overflow

user input as javascript variable

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related