用户输入为javascript变量

Question

我在javascript中编写了一个小函数，可从文本输入表单获取用户输入，以用作淡出的延迟时间，但失败了，请帮忙

<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

input中的var x是string而不是int ，因此

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

要么

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

Answer 2

你应该把

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

在函数内部，否则将仅在脚本加载后立即执行一次（并且不起作用）。

Answer 3

应该在函数内部检查延迟，否则将仅在页面加载时检查一次该值。 如果它在函数内部，则每次触发该函数时都会对其进行检查。

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