提醒輸入類型號碼的值

Question

以下是我遇到問題的代碼。在它下面，我將添加一個解釋：

$(function() { 
 
\t var $input = $("#input"); 
 
\t var input = $input.val(); 
 
\t var $go = $("#go"); 
 

 
\t $go.click(function() { 
 
\t \t alert(input); 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<main> 
 
\t <input type="number" id="input"> 
 
\t <button type="button" id="go">GO!</button> 
 
</main>

上面的代碼是一個dummie例子來表示我的實際問題，不需要更多的背景。

所以我有一個input type="number" id="input"其中你輸入一個數字和一個button type="button" id="go"。

以我的jQuery，我首先聲明$input保持所述元件#input，然後input其保持元件#input的值，最後保持該元件#go$go。

下面，我有一個功能，說，當我點擊#go，我應該能夠alert(input)。

現在，這段代碼並沒有這樣做。在我的腦海中，這是非常有意義的，但顯然它不起作用。

Answer 1

這是因爲您在點擊函數之外聲明瞭input，這意味着該值（僅爲空字符串）在運行時設置並且不會更新。您應該在單擊事件處理程序中定義input：

$(function() { 
 
    var $input = $("#input"); 
 
    var $go = $("#go"); 
 

 
    $go.click(function() { 
 
    var input = $input.val(); 
 
    alert(input); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<main> 
 
    <input type="number" id="input"> 
 
    <button type="button" id="go">GO!</button> 
 
</main>

Answer 2

首先，StackOverflow上似乎要禁止從代碼片段警報起源，這將是輸出他們更容易到控制檯，而不是所以你可以跟蹤事情。

您的代碼可以簡化下來，而不需要很多變量。

但是，您的主要問題是，當點擊事件發生時輸入值沒有得到重置，但在頁面加載時得到拾取，這意味着它將卡在''。

$(function() { 
 
    $("#go").click(function() { 
 
    var input = $("#input").val(); 
 
    console.log(input); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<main> 
 
    <input type="number" id="input"> 
 
    <button type="button" id="go">GO!</button> 
 
</main>