爲什麼我無法在我的javascript代碼中獲得輸入值

這裏的HTML和JavaScript

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
</head> 
 

 
<body> 
 

 
    <input id="input"> 
 
    <button id="button" type="button" name="button">Search</button> 
 

 
    <script> 
 
    const der = document.getElementById('input').value; 
 

 
    document.getElementById('button').addEventListener('click', 
 
     function() { 
 
     alert(der); 
 
     }); 
 
    </script> 
 

 
</body> 
 

 
</html>

我測試的鉻，歌劇和Firefox。沒有用。我也使用var而不是const，那也不工作。

我想獲得所選Id的輸入值。我真的看不到代碼中的任何問題

來源

2017-12-02 arman rozika

您的'輸入'字段仍然**空**在您的JavaScript執行時。因此，'der'是一個空字符串。嘗試在**您的點擊監聽器函數中評估'document.getElementById（'input'）。value' ** – ccjmne

因爲代碼運行時未定義該值。您需要選取函數中的值。 – Andy

這裏是一個工作示例：https：//jsfiddle.net/xossdv62/ – Sergej

您需要分配移動到der到單擊處理程序。目前，der正在加載頁面時進行評估，而不是單擊按鈕時。

document.getElementById('button').addEventListener('click', 
    function(){ 
    const der = document.getElementById('input').value; 
    alert(der); 
    });

來源

2017-12-02 17:57:03 jarmod

哦，我的..這是我的問題，我現在得到它。謝謝先生 –

const der = document.getElementById('input').value;

這是你的問題。在寫入任何內容之前，您將獲得輸入字段的值。試着做這樣的：

document.getElementById('button').addEventListener('click', 
     function() { 
     const der = document.getElementById('input').value; 
     alert(der); 
     });

來源

2017-12-02 17:53:27

der在代碼第一次運行時設置，並給出空值。點擊按鈕時重置它。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
</head> 
 

 
<body> 
 

 
    <input id="input"> 
 
    <button id="button" type="button" name="button">Search</button> 
 

 
    <script> 
 
    
 

 
    document.getElementById('button').addEventListener('click', 
 
     function() { 
 
     const der = document.getElementById('input').value; 
 
     alert(der); 
 
     }); 
 
    </script> 
 

 
</body> 
 

 
</html>

來源

2017-12-02 17:57:50

你的問題是，你的代碼立即運行在頁面加載。由於它在頁面加載時爲空，變量爲空（您可以通過在控制檯中輸入der來驗證該變量，它不是錯誤，而不是值）。

您可以通過將變量賦值信息移到該函數來修復它，以便檢查何時準備就緒。

來源

2017-12-02 17:58:28 xavdid

你的腳本不起作用，因爲你在之前從輸入字段得到的值被填寫，然後在點擊按鈕時而不是當前值時提醒該值。

解決的辦法是，當你點擊按鈕來移動得到值到被調用的回調函數行：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input id="input"> <button id="button" type="button" name="button">Search</button> <script> document.getElementById('button').addEventListener('click', function() { const der = document.getElementById('input').value; alert(der); }); </script> </body> </html>

來源

2017-12-02 17:58:41

試試這個代碼

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
</head> 
 

 
<body> 
 

 
    <input id="input" type="text"> 
 
    <button id="button" type="button" name="button">Search</button> 
 

 
    <script> 
 
    document.getElementById('button').addEventListener('click', 
 
     function() { 
 
     alert(document.getElementById('input').value); 
 
     }); 
 
    </script> 
 

 
</body> 
 

 
</html>

來源

2017-12-02 18:01:48

在與表單輸入發生任何交互之前，您的代碼在腳本執行後立即存儲輸入的值。一種解決方案可能是在您的const der中存儲對輸入的引用，然後在您的點擊事件中調用der.value。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
</head> 
 

 
<body> 
 

 
    <input id="input"> 
 
    <button id="button" type="button" name="button">Search</button> 
 

 
    <script> 
 
    const der = document.getElementById('input'); 
 

 
    document.getElementById('button').addEventListener('click', 
 
     function() { 
 
     alert(der.value); 
 
     }); 
 
    </script> 
 

 
</body> 
 

 
</html>

來源

2017-12-02 18:04:09 tritterskamp

當與DOM的工作，你想從輸入字段中獲得價值。按鈕只是您捕捉事件的方式。這就是我們使用事件監聽器的原因。一旦事件被觸發，程序知道根據你告訴它檢索的值來檢索值。

所以，你應該重寫你的情況是這樣的：

document.getElementById('button').addEventListener('click', 
    function() { 
     let der = document.getElementById('input').value; 
     //Now you can call some async code here to "play" with this value 
    });

注：我用let，因爲我看不到使用const如果該值將根據用戶的輸入更改的原因。

來源

2017-12-02 18:06:59 rayinla

爲什麼我無法在我的javascript代碼中獲得輸入值

回答

相關問題