在文本框中显示button的值，并在javascript中更改所选按钮的颜色

基础概念

在前端开发中，文本框（通常是<input type="text">）用于显示和输入文本，而按钮（通常是<button>）用于触发某种动作。JavaScript是一种脚本语言，可以用来操作HTML文档，包括更改元素的样式和内容。

类型

事件驱动：通过监听按钮的点击事件来触发JavaScript代码。
DOM操作：使用JavaScript操作DOM（文档对象模型），更改元素的属性和样式。
数据绑定：将按钮的值绑定到文本框，实现数据的实时显示和更新。

应用场景

表单验证：在用户输入时实时验证并显示结果。
动态内容更新：根据用户的选择或操作动态更新页面内容。
交互式界面：创建具有交互性的用户界面，如游戏、工具等。

示例代码

以下是一个简单的示例，展示如何在文本框中显示按钮的值，并在JavaScript中更改所选按钮的颜色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Value in Textbox</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <input type="text" id="textBox" readonly>
    <button id="button1">Button 1</button>
    <button id="button2">Button 2</button>
    <button id="button3">Button 3</button>

    <script>
        const textBox = document.getElementById('textBox');
        const buttons = document.querySelectorAll('button');

        buttons.forEach(button => {
            button.addEventListener('click', () => {
                textBox.value = button.textContent;
                buttons.forEach(btn => btn.classList.remove('highlight'));
                button.classList.add('highlight');
            });
        });
    </script>
</body>
</html>

解释

HTML部分：
- 创建一个文本框<input type="text" id="textBox" readonly>，用于显示按钮的值。
- 创建三个按钮<button id="button1">Button 1</button>，<button id="button2">Button 2</button>，<button id="button3">Button 3</button>。

CSS部分：
- 定义一个.highlight类，用于更改按钮的背景颜色。
JavaScript部分：
- 获取文本框和所有按钮的引用。
- 为每个按钮添加点击事件监听器。
- 当按钮被点击时，将按钮的文本内容显示在文本框中，并移除所有按钮的highlight类，然后为被点击的按钮添加highlight类，从而更改其背景颜色。