Question

我有三个文本字段，稍后会在屏幕上进行总结。

我尝试使用getelementbyid和getelementsbyname获取输入数据。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<html>

<body>
  <form id="frm1">
    First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br><br>
    <input type="submit" value="Submit">
  </form>

  <p>Click "Try it" to show the full name:</p>

  <button onclick="myFunction()">Try it</button>
  <p id="demo"></p>
  <script>
    function myFunction() {
      document.getElementById("demo").innerHTML = "Hey ," + fname + " " + lname;
    }
  </script>
</body>

</html>

应该显示Hey，Firstname Lastname

Answer 1

<!DOCTYPE html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<html>
<body>
<form id="frm1" >
  First name: <input type="text" id='fname' ><br>
  Last name: <input type="text" id='lname' ><br><br>
  <input type="submit" value="Submit">
</form>

<p>Click "Try it" to show the full name:</p>

<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var fname = document.getElementById("fname"); 
var lname = document.getElementById("lname"); 
function myFunction() {
  document.getElementById("demo").innerHTML  = "Hey ,"+fname.value+ " "+lname.value;
}
</script>
</body>
</html>

这应该为您工作。您必须将html元素的值赋予javascript变量，然后才能在innerHTML函数中使用这些变量的.value。

Answer 2

尝试此代码。

<!DOCTYPE html>
    <html>
    <body>
    <form id="frm1" >
      First name: <input type="text" name="fname" id="fname"><br>
      Last name: <input type="text" name="lname" id="lname"><br><br>
      <input type="submit" value="Submit">
    </form>

    <p>Click "Try it" to show the full name:</p>

    <button onclick="myFunction()">Try it</button>
    <p id="demo"></p>
    <script>
    function myFunction() {
      document.getElementById("demo").innerHTML = "Hey ,"+document.getElementById("fname").value+ " "+document.getElementById("lname").value;
    }
    </script>
    </body>
    </html>

Answer 3

我不确定您为什么无法getElementsByName工作，但是可以解决问题：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<html>

<body>
  <form id="frm1">
    First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br><br>
    <input type="submit" value="Submit">
  </form>

  <p>Click "Try it" to show the full name:</p>

  <button onclick="myFunction()">Try it</button>
  <p id="demo"></p>
  <script>
    function myFunction() {
      var fname = document.getElementsByName('fname')[0].value,
          lname = document.getElementsByName('lname')[0].value;
      document.getElementById("demo").innerHTML = "Hey ," + fname + " " + lname;
    }
  </script>
</body>

</html>

Answer 4

您正尝试通过ID访问输入，但尚未给输入提供ID，只是名称变量

Answer 5

<!DOCTYPE html>
<html>
<body>
<form id="frm1" >
  First name: <input type="text" name="fname" ><br>
  Last name: <input type="text" name="lname" ><br><br>
  <input type="submit" value="Submit">
</form>

<p>Click "Try it" to show the full name:</p>

<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hey ,"+document.getElementById("frm1").fname.value+ " "+document.getElementById("frm1").lname.value;
}
</script>
</body>
</html>

从文本字段<input>中打印信息

5 个答案: