用戶輸入為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();
});