为什么我无法在我的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的输入值。我真的看不到代码中的任何问题

您的'输入'字段仍然**空**在您的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); 
    });

哦，我的..这是我的问题，我现在得到它。谢谢先生 –

答

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

这是你的问题。在写入任何内容之前，您将获得输入字段的值。试着做这样的：

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

答

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>

答

你的问题是，你的代码立即运行在页面加载。由于它在页面加载时为空，变量为空（您可以通过在控制台中输入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>

答

试试这个代码

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

答

在与表单输入发生任何交互之前，您的代码在脚本执行后立即存储输入的值。一种解决方案可能是在您的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>

答

当与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如果该值将根据用户的输入更改的原因。

为什么我无法在我的javascript代码中获得输入值

相关推荐