js 两个文本框

以下是关于 JavaScript 中两个文本框常见问题的完整解答：

基础概念：在网页中，文本框通常使用 <input type="text"> 元素来创建。通过 JavaScript 可以获取和操作这两个文本框的值。

相关优势：

实现用户输入的动态处理和验证。
能够根据一个文本框的内容实时影响另一个文本框的表现。

类型：常见的有单行文本框和多行文本框（使用 <textarea> 元素）。

应用场景：

用户名和密码输入框，相互之间可能有关联限制。
搜索框和关键词提示框。

可能遇到的问题及原因：

无法获取文本框的值：
- 原因可能是没有正确选择元素，或者获取值的时机不对（如在 DOM 元素加载之前就尝试获取）。
- 解决方法：确保使用正确的选择器（如 document.getElementById 、 document.querySelector ），将获取值的代码放在页面加载完成后执行（如放在 window.onload 事件中）。

文本框内容同步问题：
- 原因可能是事件监听没有正确设置，或者更新值的逻辑有误。
- 解决方法：为相关操作添加准确的事件监听（如 input 事件），仔细检查更新值的代码逻辑。

示例代码：假设我们有两个文本框，一个输入数字，另一个显示其平方值。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Box Example</title>
</head>

<body>
  <input type="number" id="numInput" placeholder="请输入一个数字">
  <input type="text" id="resultInput" placeholder="平方值" readonly>

  <script>
    window.onload = function () {
      const numInput = document.getElementById('numInput');
      const resultInput = document.getElementById('resultInput');

      numInput.addEventListener('input', function () {
        const num = Number(numInput.value);
        if (!isNaN(num)) {
          resultInput.value = num * num;
        } else {
          resultInput.value = '';
        }
      });
    };
  </script>
</body>

</html>

在上述代码中，当在第一个数字文本框中输入内容时，会实时计算其平方值并在第二个文本框中显示。