为什么我无法在JavaScript代码中获得输入值
[英]Why I can't get input value in my javascript code
问题描述
I can't get the value of selected Id. 
我无法获取所选ID的值。
Here's the html and 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>
I tested it on chrome, opera, and firefox. 我在Chrome，Opera和Firefox上进行了测试。 Nothing work. 没事 I have used var also instead of const , that dont work too. 我也用var代替了const ，那也行不通。
I want to get the input value of the Id I selected. 我想获取我选择的ID的输入值。 I really can't see any problem in the code 我真的看不到代码中的任何问题
8 个解决方案
解决方案1
1 2017-12-02 17:53:27
const der = document.getElementById('input').value;
This is your problem. 这是你的问题。 You are getting the value of the input field before anything is written in it. 在将任何内容写入其中之前，您正在获取输入字段的值。 Try doing it like this: 尝试这样做：
document.getElementById('button').addEventListener('click',
function() {
const der = document.getElementById('input').value;
alert(der);
});
解决方案2
0 已采纳 2017-12-02 17:57:03
You need to move the assignment to der into the click handler. 您需要将分配转移到der到点击处理程序中。 At present, der is being evaluated when the page is loaded, not when the button is clicked. 目前，在页面加载时（而不是在单击按钮时）评估der 。
document.getElementById('button').addEventListener('click',
function(){
const der = document.getElementById('input').value;
alert(der);
});
解决方案3
0 2017-12-02 17:57:50
der is set when the code is first run, and given the empty value. 首次运行代码时设置der ，并指定空值。 Reset it when the button is clicked. 单击按钮时将其重置。
<!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
Your issue is that your code runs immediately on page load. 您的问题是您的代码在页面加载后立即运行。 Since its empty when the page loads, the variable is empty (which you can verify by typing der in the console, it's not an error, but not a value). 由于页面加载时为空，因此变量为空（您可以通过在控制台中键入der进行验证，这不是错误，但不是值）。
You can fix it by moving the variable assignment info the function, so it checks when you're ready. 您可以通过将变量分配信息移到该函数中来对其进行修复，以便它检查何时准备就绪。
解决方案5
0 2017-12-02 17:58:41
You script doesn't work, because you get the value from the input field before it is filled out and then alert that value when the button is clicked, instead of the current value. 您的脚本不起作用，因为您需要在填写输入字段之前从输入字段中获取该值，然后在单击该按钮时警告该值，而不是当前值。
The solution is to move the line that gets the value into the callback function that is called when you click the button: 解决方案是将获取值的行移到单击按钮时调用的回调函数中：
<!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
Try this code 试试这个代码
<!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
Your code is storing the value of the input as soon as the script executes, before any interaction with the form input occurs. 在与表单输入进行任何交互之前，脚本执行后，代码将立即存储输入的值。 One solution could be to store reference to the input in your const der and then call der.value inside of your click event. 一种解决方案是将对输入的引用存储在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
When working with the DOM, you want to get value from the input field. 使用DOM时，您希望从输入字段中获取价值。 The button is just your way of catching the event. 该按钮只是您捕获事件的方式。 This is why we use event listeners. 这就是为什么我们使用事件监听器。 Once the event is triggered, the program knows to retrieve value based on what you tell it to retrieve. 触发事件后，程序便会根据您告诉它的检索值知道检索值。
So, you should rewrite your event like this: 因此，您应该这样重写事件：
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
});
Note: I used let because I don't see the reason to use const if this value will change depending on the user's input. 注意：我使用let是因为我看不到使用const的原因，如果此值将根据用户的输入而变化。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.