使用Javascript输入元素获得空白值

Question

因此，我正在进行简单的Form验证。但是，当我尝试使用JavaScript从控制台的input元素中获取值时输入值后，它将返回空白。

我要去哪里错了：

下面是代码：

var x = document.getElementById("fName").value; 
 
var y = document.getElementById("lName").value; 
 
var z = document.getElementById("emailId").value; 
 

 
function myFunction() { 
 
    document.getElementById("demo").innerHTML = x; 
 
    console.log(x); 
 
}

<h1 class="jumbotron">Simple Form Validation</h1> 
 
<div class="container-fluid"> 
 
    <form> 
 
    <label>First Name: <input type="text" value="" id="fName" placeholder="ex: Shubham"></label><br /> 
 
    <label>Second Name: <input id="lName" value="" type="text" placeholder="ex: Bhatt"></label><br /> 
 
    <label>Email Id: <input id="emailId" value="" type="alphanumeric" placeholder="ex: abc@gmail.com"></label> <br /> 
 
    <input type="button" value="Submit" id="submitBtn" class="btn btn-primary" onclick="myFunction()"> 
 
    <p id="demo"></p> 
 
    </form> 
 
</div>

Answer 1

/* 
 
    var x = document.getElementById("fName").value; 
 
    var y = document.getElementById("lName").value; 
 
    var z = document.getElementById("emailId").value; 
 
    */ 
 
     function myFunction(){ 
 
      var x = document.getElementById("fName").value; 
 
      var y = document.getElementById("lName").value; 
 
      var z = document.getElementById("emailId").value; 
 
      document.getElementById("demo").innerHTML = x; 
 
      console.log(x); 
 
     }

<h1 class="jumbotron">Simple Form Validation</h1> 
 
<div class="container-fluid"> 
 
    <form> 
 
     <label>First Name: <input type="numeric" value="" id="fName" placeholder="ex: Shubham"></label><br /> 
 
     <label>Second Name: <input id="lName" value="" type="text" placeholder="ex: Bhatt"></label><br /> 
 
     <label>Email Id: <input id="emailId" value="" type="alphanumeric" placeholder="ex: abc@gmail.com"></label> <br /> 
 
     <input type="button" value="Submit" id="submitBtn" class="btn btn-primary" onclick="myFunction()"> 
 
    <p id="demo"></p> 
 
    </form> 
 
</div>

移动变量

全球 - >本地

Answer 2

您正在获取函数外的值，换句话说，您在输入任何内容之前尝试获取输入字段的值。试试这个而不是你的javascript

<script> 

     function myFunction(){ 
      var x = document.getElementById("fName").value; 
      var y = document.getElementById("lName").value; 
      var z = document.getElementById("emailId").value; 
      document.getElementById("demo").innerHTML = x; 
      console.log(x); 
     } 
</script> 

Answer 3

你正在提取文档准备好时的值。但是，你必须在用户提交form.So获得价值，你需要得到function内的值尝试使用这样的：

function myFunction(){ 
     var x = document.getElementById("fName").value; 
     var y = document.getElementById("lName").value; 
     var z = document.getElementById("emailId").value; 
     document.getElementById("demo").innerHTML = x; 
     console.log(x); 
    } 

Answer 4

你只查询自己的价值观一次作为加载页面。你可以做的是查询你的函数内的字段和值。或者更好：只检查你函数的值，离开getElementById还在外面，像这样：

var x = document.getElementById("fName"); 
 
var y = document.getElementById("lName"); 
 
var z = document.getElementById("emailId"); 
 

 
function myFunction() { 
 
    document.getElementById("demo").innerHTML = x.value; 
 
    console.log(x.value); 
 
}

<h1 class="jumbotron">Simple Form Validation</h1> 
 
<div class="container-fluid"> 
 
    <form> 
 
    <label>First Name: <input type="text" value="" id="fName" placeholder="ex: Shubham"></label><br /> 
 
    <label>Second Name: <input id="lName" value="" type="text" placeholder="ex: Bhatt"></label><br /> 
 
    <label>Email Id: <input id="emailId" value="" type="alphanumeric" placeholder="ex: abc@gmail.com"></label> <br /> 
 
    <input type="button" value="Submit" id="submitBtn" class="btn btn-primary" onclick="myFunction()"> 
 
    <p id="demo"></p> 
 
    </form> 
 
</div>