动态交互是指用户与网站或应用之间的实时交互,例如点击按钮、输入文本等。在浏览器中,我们可以使用JavaScript来实现这种交互。以下是一个简单的示例,展示了如何使用JavaScript实现动态交互:
```html
// 获取页面上的元素
var button = document.getElementById("myButton");
var textBox = document.getElementById("myTextBox");
var resultDisplay = document.getElementById("resultDisplay");
// 为按钮添加点击事件监听器
button.addEventListener("click", function() {
// 获取用户输入的文本
var userInput = textBox.value;
// 将用户的输入添加到结果显示区域
resultDisplay.innerHTML = "你输入的文本是:" + userInput;
});
```
在这个示例中,我们首先获取了页面上的三个元素:一个按钮、一个文本框和一个显示结果显示的区域。然后,我们为按钮添加了一个点击事件监听器,当用户点击按钮时,会触发这个事件监听器的回调函数。在这个回调函数中,我们获取了用户输入的文本,并将其添加到结果显示区域。