堆棧內存溢出
  簡體   English   中英

為什么我無法在JavaScript代碼中獲得輸入值

[英]Why I can't get input value in my javascript code

 原文  2017-12-02 17:51:45  3   8    javascript/ input

問題描述

我無法獲取所選ID的值。

這是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>

我在Chrome，Opera和Firefox上進行了測試。 沒事 我也用var代替了const ，那也行不通。

我想獲取我選擇的ID的輸入值。 我真的看不到代碼中的任何問題

8 個解決方案

解決方案1
 1  2017-12-02 17:53:27

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

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

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

解決方案2
 0 已采納  2017-12-02 17:57:03

您需要將分配轉移到der到點擊處理程序中。 目前，在頁面加載時（而不是在單擊按鈕時）評估der 。 

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

解決方案3
 0  2017-12-02 17:57:50

首次運行代碼時設置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>

解決方案4
 0  2017-12-02 17:58:28

您的問題是您的代碼在頁面加載后立即運行。 由於頁面加載時為空，因此變量為空（您可以通過在控制台中鍵入der進行驗證，這不是錯誤，但不是值）。

您可以通過將變量分配信息移到該函數中來對其進行修復，以便它檢查何時准備就緒。

解決方案5
 0  2017-12-02 17:58:41

您的腳本不起作用，因為您需要在填寫輸入字段之前從輸入字段中獲取該值，然后在單擊該按鈕時警告該值，而不是當前值。

解決方案是將獲取值的行移到單擊按鈕時調用的回調函數中： 

 <!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>

解決方案6
 0  2017-12-02 18:01:48

試試這個代碼 

 <!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>

解決方案7
 0  2017-12-02 18:04:09

在與表單輸入進行任何交互之前，腳本執行后，代碼將立即存儲輸入的值。 一種解決方案是將對輸入的引用存儲在const der ，然后在click事件中調用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>

解決方案8
 0  2017-12-02 18:06:59

使用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的原因，如果此值將根據用戶的輸入而變化。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 為什么我無法在表單中獲取輸入值 為什么我無法獲得輸入值 為什么我不能在其中輸入文字<input>帶有 javascript 代碼的字段？ 文字閃回原值 為什么我無法在模態中獲取輸入的值（使用 Jquery 和 Javascript） JavaScript - 為什么當“Document.querySelector().value”在 function 之外時我的代碼不運行 為什么頭部選擇中的javascript代碼不能獲得元素？ 為什么不能使用輸入更改值？ 為什么不能讀入輸入值並顯示警報？ 為什么我無法使用javascript從輸入中獲取價值？ 為什么我不能獲得價值FCKeditor的。 在他們的代碼示例[Javascript]之后完成
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM