使用Javascript輸入元素獲得空白值

因此，我正在進行簡單的Form驗證。但是，當我嘗試使用JavaScript從控制檯的input元素中獲取值時輸入值後，它將返回空白。使用Javascript輸入元素獲得空白值

我要去哪裏錯了：

下面是代碼：

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: [email protected]"></label> <br /> 
 
    <input type="button" value="Submit" id="submitBtn" class="btn btn-primary" onclick="myFunction()"> 
 
    <p id="demo"></p> 
 
    </form> 
 
</div>

來源

2017-08-26 s4tr2

你的代碼獲取字段的值** **一次，當第一頁負載。在函數內部移動前三行代碼。 – Pointy

謝謝，它的工作 – s4tr2

/* 
 
    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: [email protected]"></label> <br /> 
 
     <input type="button" value="Submit" id="submitBtn" class="btn btn-primary" onclick="myFunction()"> 
 
    <p id="demo"></p> 
 
    </form> 
 
</div>

移動變量

全球 - >本地

來源

2017-08-26 13:47:38 zynkn

您正在獲取函數外的值，換句話說，您在輸入任何內容之前嘗試獲取輸入字段的值。試試這個而不是你的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>

來源

2017-08-26 13:48:29 Sohail

你正在提取文檔準備好時的值。但是，你必須在用戶提交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); 
    }

來源

2017-08-26 13:48:44

你只查詢自己的價值觀一次作爲加載頁面。你可以做的是查詢你的函數內的字段和值。或者更好：只檢查你函數的值，離開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: [email protected]"></label> <br /> 
 
    <input type="button" value="Submit" id="submitBtn" class="btn btn-primary" onclick="myFunction()"> 
 
    <p id="demo"></p> 
 
    </form> 
 
</div>

來源

2017-08-26 13:50:11 lumio

使用Javascript輸入元素獲得空白值

回答

相關問題