Question

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

我哪里错了：

以下是代码：

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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>

移动变量

全球 - ＆gt;本地

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

文档准备好后，您将提取值。但是，当用户提交表单时，您必须获取该值。因此，您需要使用以下内容获取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>

使用输入元素中的Javascript获取空白值

4 个答案: