根据ID填充文本框的实例代码

下面我会给您详细讲解如何根据ID填充文本框的实例代码，包括代码和步骤：

步骤1：HTML模板

首先，我们需要准备一个HTML模板，包含一个文本框和一个按钮。该文本框将用于显示根据ID填充的结果。示例代码如下：

<form>
  <input type="text" id="myText">
  <button onclick="populateText()">Populate Text</button>
</form>

步骤2：JavaScript代码

然后，我们需要编写JavaScript代码，控制根据ID填充文本框的逻辑。代码如下：

function populateText() {
  var myId = "123456"; // 这里可以把ID作为参数传递进来
  var myText = document.getElementById("myText");
  myText.value = myId;
}

在上面的代码中，我们定义了一个名为populateText的函数，该函数会获取ID参数，并根据ID填充文本框。此处我们将ID设置为123456，您可以将ID作为参数传递进来。函数会通过document.getElementById获取文本框元素，然后通过该元素的value属性设置文本框的值。

示例1：根据按钮点击填充文本框

下面，我们通过一个按钮点击事件来演示如何根据ID填充文本框。首先，我们需要为按钮添加一个点击事件监听器，代码如下：

document.querySelector("button").addEventListener("click", populateText);

在代码中，我们通过document.querySelector获取第一个按钮元素，并添加了一个点击事件监听器。该监听器将触发我们之前定义的populateText函数，填充ID到文本框中。

示例2：页面加载时自动填充文本框

除了通过按钮点击来触发填充文本框的逻辑，我们还可以在页面加载时自动填充文本框。示例代码如下：

document.addEventListener("DOMContentLoaded", function() {
  populateText();
});

在代码中，我们通过document.addEventListener添加了一个DOMContentLoaded事件监听器，该监听器会在页面加载完成后自动调用populateText函数，并填充文本框。