当前位置：首页 > 问答 > 正文

JS动态创建文本框与按钮，网友热议：点击按钮如何高效获取文本框内容

问答
2025-01-30 19:42:29
57
更新：2025-01-30 19:42:29

本文目录导读：

HTML 部分
JavaScript 部分
解释

在JavaScript中动态创建文本框和按钮，并在点击按钮时高效地获取文本框的内容，是一个常见的需求，以下是一个简单的示例，展示了如何实现这一功能。

HTML 部分

我们需要在HTML中提供一个容器，用于动态插入文本框和按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Textbox and Button</title>
</head>
<body>
    <div id="container"></div>
    <button id="addButton">Add Textbox and Button</button>
    <script src="script.js"></script>
</body>
</html>

JavaScript 部分

我们在script.js文件中编写JavaScript代码，用于动态创建文本框和按钮，并处理按钮点击事件以获取文本框的内容。

document.addEventListener('DOMContentLoaded', (event) => {
    const container = document.getElementById('container');
    const addButton = document.getElementById('addButton');
    let textboxCounter = 0;
    addButton.addEventListener('click', () => {
        // Create a new textbox
        const textbox = document.createElement('input');
        textbox.type = 'text';
        textbox.id =textbox${textboxCounter};
        textbox.placeholder =Enter text ${textboxCounter + 1};
        // Create a new button
        const getButton = document.createElement('button');
        getButton.innerText = 'Get Text';
        getButton.dataset.textboxId =textbox${textboxCounter}; // Store the textbox ID in a data attribute
        // Add event listener to the new button
        getButton.addEventListener('click', () => {
            const textboxId = getButton.dataset.textboxId;
            const textValue = document.getElementById(textboxId).value;
            alert(The text in textbox ${textboxCounter + 1} is: ${textValue});
        });
        // Append the textbox and button to the container
        container.appendChild(textbox);
        container.appendChild(getButton);
        container.appendChild(document.createElement('br')); // Add a line break for spacing
        textboxCounter++;
    });
});