正文

轻松掌握原生JS：绑定两个按钮点击事件，实现互动效果

/0 浏览量
0923

在这个例子中，我们将学习如何使用原生JavaScript来绑定两个按钮的点击事件，并实现一个简单的互动效果。通过这个过程，你可以加深对事件监听和DOM操作的理解。

准备工作

首先，我们需要创建一个简单的HTML页面，其中包含两个按钮和一段用于显示信息的段落。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>绑定按钮点击事件</title>
</head>
<body>

<button id="button1">按钮1</button>
<button id="button2">按钮2</button>
<p id="info">点击按钮查看互动效果！</p>

<script src="script.js"></script>
</body>
</html>

在上面的HTML代码中，我们定义了两个按钮button1和button2，以及一个用于显示信息的段落info。

JavaScript 代码

接下来，我们需要编写JavaScript代码来绑定这两个按钮的点击事件。

// 获取按钮和段落元素
var button1 = document.getElementById('button1');
var button2 = document.getElementById('button2');
var info = document.getElementById('info');

// 绑定按钮1的点击事件
button1.addEventListener('click', function() {
    info.textContent = '按钮1被点击了！';
});

// 绑定按钮2的点击事件
button2.addEventListener('click', function() {
    info.textContent = '按钮2被点击了！';
});

在上面的JavaScript代码中，我们首先通过getElementById方法获取到按钮和段落元素。然后，我们使用addEventListener方法为每个按钮绑定了一个点击事件监听器。

  • 当按钮1被点击时，它会将段落info的内容设置为”按钮1被点击了！”
  • 当按钮2被点击时，它会将段落info的内容设置为”按钮2被点击了！”

这样，我们就完成了两个按钮点击事件的绑定，并且实现了简单的互动效果。

总结

通过这个例子，我们学习了如何使用原生JavaScript来绑定按钮的点击事件，并实现一个简单的互动效果。这个例子可以帮助你更好地理解事件监听和DOM操作的概念。希望这个例子能够帮助你轻松掌握原生JavaScript！

-- 展开阅读全文 --