如何在点击时更改按钮值？

用户交互: 在用户点击按钮后提供反馈，例如显示“已点击”状态。
动态内容更新: 根据用户的操作动态更新页面上的元素内容。

要在点击时更改按钮的值，可以使用JavaScript来实现这一功能。以下是一个简单的示例，展示了如何在点击按钮时更改其文本内容。

基础概念

HTML: 用于创建网页的结构。
JavaScript: 一种脚本语言，用于实现网页上的交互效果。
DOM (Document Object Model): 表示网页的结构化表示，允许JavaScript操作网页元素。

示例代码

以下是一个完整的示例，展示了如何在点击按钮时更改其值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Button Value on Click</title>
</head>
<body>
    <button id="myButton">Click Me</button>

    <script>
        // 获取按钮元素
        const button = document.getElementById('myButton');

        // 添加点击事件监听器
        button.addEventListener('click', function() {
            // 更改按钮的值
            button.textContent = 'Clicked!';
        });
    </script>
</body>
</html>

解释

HTML部分:
- 创建一个按钮元素，并为其指定一个唯一的ID (myButton)。

JavaScript部分:
- 使用 document.getElementById 方法获取按钮元素。
- 使用 addEventListener 方法为按钮添加一个点击事件监听器。
- 在事件处理函数中，通过修改 button.textContent 属性来更改按钮的文本内容。