JavaScript实现四个浏览器交互按钮入门开发指导

DevOps 小满

2026-9-1

原生JS实现浏览器交互按钮入门步骤

首先直接回答核心疑问：只要是写在HTML里、给浏览器运行的JS代码，就必须加<script>标签，没有其他绕路的写法。
推荐把<script>标签写在</body>闭合标签的前面，也就是所有页面静态内容的最后，这样不用记额外的属性配置，不会出现JS找不到页面元素的问题。
具体开发按下面的步骤走即可：

第一步：先写完整的基础HTML骨架，把4个按钮的静态结构先写出来，每个按钮设置唯一的id属性，方便后续JS定位。参考代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>交互按钮demo</title>
</head>
<body>
    <!-- 4个静态按钮 -->
    <button id="firstBtn">第一个按钮</button>
    <button id="secondBtn">第二个按钮</button>
    <button id="thirdBtn">第三个按钮</button>
    <button id="fourthBtn">第四个按钮</button>

    <!-- script标签固定放这里，所有JS代码写在标签内部 -->
    <script>

    </script>
</body>
</html>

第二步：在<script>标签内部，先获取4个按钮对应的DOM对象，新手直接用document.getElementById()方法就行，写法简单不容易出错。代码示例：

// 这里写的id要和按钮标签上的id属性完全一致才能拿到对应元素
const firstBtn = document.getElementById('firstBtn')
const secondBtn = document.getElementById('secondBtn')
const thirdBtn = document.getElementById('thirdBtn')
const fourthBtn = document.getElementById('fourthBtn')

写完这部分可以先加一行console.log(firstBtn)测试，保存文件后拖到浏览器打开，按F12调出开发者工具切到Console面板，要是能看到输出按钮元素就说明位置和id都写对了，要是输出null就回去检查id拼写、script标签是不是放在按钮后面。

第三步：给每个按钮绑定交互事件，统一用addEventListener方法绑定点击事件，不要把JS逻辑直接写在HTML标签的onclick属性里，后期改起来很麻烦。你可以按需给每个按钮写不同的交互逻辑，比如弹提示、改文字、改样式都可以，参考代码：

// 第一个按钮：点击弹出提示
firstBtn.addEventListener('click', function() {
    alert('你点击了第一个按钮')
})

// 第二个按钮：点击修改自身文字
secondBtn.addEventListener('click', function() {
    secondBtn.textContent = '已点击'
})

// 第三个按钮：点击修改页面背景色
thirdBtn.addEventListener('click', function() {
    document.body.style.backgroundColor = '#eef2ff'
})

// 第四个按钮：点击重置所有状态
fourthBtn.addEventListener('click', function() {
    secondBtn.textContent = '第二个按钮'
    document.body.style.backgroundColor = '#ffffff'
})

第四步：调试运行。每次改完代码保存文件，在浏览器里刷新页面就能看到最新效果，要是交互没生效，直接看Console面板的报错提示，新手阶段80%以上的问题都是符号写成中文全角、id拼写错误、少写括号引号这类低级问题，报错信息会直接标出错在哪一行，对着改就行。

入门阶段提醒：
不用一开始就折腾构建工具、前端框架、复杂的运行环境，就用普通文本编辑器写原生HTML+JS，写完直接拖进浏览器运行，是入门最快的方式，不会被工具问题卡进度。
所有代码里的括号、引号、冒号都要用英文半角符号，不要在代码里混中文标点，会直接报错。

内容的提问来源于stack exchange，提问作者joshua.p.ward2