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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

您需要分配移动到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代码中获得输入值 的全部内容， 来源链接： utcz.com/qa/257572.html

回到顶部