html js

作者：颠峰神射发布日期:2026-06-27 浏览:78

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML JS Example</title>
</head>
<body>
    <h1>Welcome to HTML and JavaScript!</h1>
    <button id="myButton">Click Me</button>
    <p id="result"></p>

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

        // 为按钮添加点击事件监听器
        button.addEventListener('click', function() {
            // 当按钮被点击时，更改段落文本
            result.textContent = 'Button was clicked!';
        });
    </script>
</body>
</html>

解释说明：

HTML部分:
- 创建了一个简单的HTML页面，包含一个标题、一个按钮和一个段落。
- 按钮的ID是myButton，段落的ID是result。
JavaScript部分:
- 使用document.getElementById获取按钮和段落元素。
- 使用addEventListener为按钮添加点击事件监听器。
- 当按钮被点击时，改变段落的文本内容为Button was clicked!。

这个示例展示了如何将HTML和JavaScript结合使用，以实现简单的交互功能。

上一篇：js innerhtml

下一篇：html css js三者之间的关系