时间戳

首页 > 解决方案 > 无法从文本框获取输入

javascript - 无法从文本框获取输入

问题描述

我正在尝试从文本框中获取输入，但它不起作用。

我也很难让我的变量在函数之间工作。

var first_name = document.getElementById('first');
var last_name = document.getElementById('first');

function firstNameClick() {
  window.document.f.note.value = "Enter first name, then last name.";
  window.document.f.note.size = 25;
}

function firstNameLeave() {
  window.document.f.note.size = 10;
  window.document.f.note.value = "";
  first_name = document.getElementById('first');
  if ((first_name != "") && (last_name != "")) {
    window.document.f.firstDisplay.value = (first_name);
    window.document.f.firstDisplay.value = (last_name);
  } else {
    window.document.f.firstDisplay.value = "";
  }

}

function lastName() {
  last_name = document.getElementById('last');
  if ((first_name != "") && (last_name != "")) {
    window.document.f.lastDisplay.value = (last_name);
    window.document.f.firstDisplay.value = (first_name);
  } else {
    window.document.f.lastDisplay.value = "";
  }
}
<form name="f">
  <font>First Name</font>
  </br>
  <input type="text" id="first" name="first" size=35 onClick="firstNameClick();" onBlur="firstNameLeave();">
  </br>
  </br>
  <font>Last Name</font>
  </br>
  <input type="text" id="last" name="last" size=35 onBlur="lastName();">
  </br>
  </br>
  <font>Note</font>
  </br>
  <input type="text" name="note" size=10 value="" readonly>
  </br>
  </br>
  <font>Display</font>
  </br>
  <input type="text" name="firstDisplay" size=25 value="" readonly>
  </br>
  <input type="text" name="lastDisplay" size=25 value="" readonly>

</form>

标签： javascripthtmlforms

解决方案

<html>
<head></head>
<body>
  <form name="f">
    <font>First Name</font>
    <br>
    <input type="text" id="first" name="first" size=35 onClick="firstNameClick();" onBlur="firstNameLeave();">
    <br>
    <br>
    <font>Last Name</font>
    <br>
    <input type="text" id="last" name="last" size=35 onBlur="lastName();">
    <br>
    <br>
    <font>Note</font>
    <br>
    <input type="text" name="note" size=10 value="" readonly>
    <br>
    <br>
    <font>Display</font>
    <br>
    <input type="text" name="firstDisplay" size=25 value="" readonly>
    <br>
    <input type="text" name="lastDisplay" size=25 value="" readonly>

  </form>
  
  <script>
    var first_name = document.getElementById('first').value; //add .value
    var last_name = document.getElementById('last').value; // add .value and use 'last' in attribute selector you had first
    window.document.f = document.querySelector('f');

    function firstNameClick() {
      window.document.f.note.value = "Enter first name, then last name.";
      window.document.f.note.size = 25;
    }

    function firstNameLeave() {
      window.document.f.note.size = 10;
      window.document.f.note.value = "";
      first_name = document.getElementById('first').value; // add.value
      if ((first_name != "") && (last_name != "")) {
        window.document.f.firstDisplay.value = (first_name);
        window.document.f.lastDisplay.value = (last_name); //use lastDisplay
      } else {
        window.document.f.firstDisplay.value = "";
      }
    }

    function lastName() {
      last_name = document.getElementById('last').value; //add .value
      if ((first_name != "") && (last_name != "")) {
        window.document.f.lastDisplay.value = (last_name);
        window.document.f.firstDisplay.value = (first_name);
      } else {
        window.document.f.lastDisplay.value = "";
      }
    }
  </script>
</body>

</html>

推荐阅读