用JavaScript写一段点击不同按钮显示不同文本的代码
时间: 2024-09-23 14:13:12 浏览: 45
javascript实现点击后变换按钮显示文字的方法
5星 · 资源好评率100%
在JavaScript中,你可以通过事件监听器来实现不同按钮点击时显示不同的文本。这里是一个简单的例子:
```javascript
// 首先,假设我们有三个按钮,分别用id关联了不同的文本
var button1 = document.getElementById('button1');
var button2 = document.getElementById('button2');
var button3 = document.getElementById('button3');
// 给每个按钮添加点击事件处理器
button1.addEventListener('click', function() {
displayText('这是一段文本1');
});
button2.addEventListener('click', function() {
displayText('这是一段文本2');
});
button3.addEventListener('click', function() {
displayText('这是一段文本3');
});
// 函数用来显示文本
function displayText(text) {
// 想要在某个DOM元素上显示文本,比如一个div
var textArea = document.getElementById('textArea');
textArea.textContent = text;
}
```
在这个示例中,当用户点击第一个按钮时,会调用`displayText('这是一段文本1')`,显示指定的文本;同理,点击第二个和第三个按钮会分别显示不同的文本。
阅读全文