如何通过按钮将字符串输入到字段中

本文将介绍如何使用HTML表单、JavaScript函数以及按钮点击事件，实现将文本框中的字符串输入到另一个div元素中显示的功能。我们将重点解决页面重载问题，并提供简洁有效的解决方案，确保用户输入的内容能够正确地显示在目标区域。

HTML结构

首先，我们需要创建一个包含文本输入框和按钮的HTML表单。

    
                Enter Serialnumber    

关键点：

快转字幕

新一代 AI 字幕工作站，为创作者提供字幕制作、学习资源、会议记录、字幕制作等场景，一键为您的视频生成精准的字幕。

357 查看详情 type=”button”: 将 的 type 属性设置为 “button” 可以阻止按钮触发表单提交的默认行为，从而避免页面重载。id=”myForm”: 为 form 标签添加 id 属性，方便后续使用 JavaScript 获取表单元素。id=”snfield”: 为输入框添加 id 属性，方便后续使用 JavaScript 获取输入框的值。id=”sn”: 为显示文本的 div 标签添加 id 属性，方便后续使用 JavaScript 修改其内容。

JavaScript函数

接下来，我们需要编写一个 JavaScript 函数，用于获取文本输入框中的值，并将其添加到目标 div 元素中。

function addnewSN() {    var text = document.getElementById('snfield').value;    document.getElementById('sn').innerHTML += text;}

关键点：

document.getElementById(‘snfield’).value: 使用 document.getElementById() 方法获取 id 为 “snfield” 的元素，并使用 .value 属性获取其值。document.getElementById(‘sn’).innerHTML += text: 使用 document.getElementById() 方法获取 id 为 “sn” 的元素，并使用 .innerHTML += text 将文本添加到该元素的内容中。

完整代码示例

将上述 HTML 结构和 JavaScript 函数结合起来，即可实现所需的功能。

    function addnewSN() {        var text = document.getElementById('snfield').value;        document.getElementById('sn').innerHTML += text;    }    
                

Enter Serialnumber