<div id="main"> <div id="chatOne"> <div class="name"></div> 点击发送时,获取当前按钮的div下的input值 <ul class="information"></ul> <div class="bottom"> <input class="chatInfo" value="请输入留言内容"/> <button class="sentImage" onclick="add(this.previousElementSibling)">发送</button> </div> </div> <div id="chatTwo"> <div class="name"></div> <ul class="information"></ul> <div class="bottom"> <input class="chatInfo" value="请输入留言内容"/> <button class="sentImage" onclick="add(this.previousElementSibling)">发送</button> </div> </div> </div>
时间: 2023-10-07 11:11:02 浏览: 47
这段HTML代码展示了两个聊天窗口,每个聊天窗口包含一个输入框和一个发送按钮,点击发送按钮时应该获取相应聊天窗口中输入框的值,并将其添加到该聊天窗口中的信息列表中。
可以使用JavaScript来实现这个功能,具体步骤如下:
1. 给每个发送按钮添加一个点击事件处理函数,该函数应该获取相应聊天窗口中的输入框的值,并将其添加到该聊天窗口中的信息列表中。
2. 在点击事件处理函数中,使用`this`关键字来获取当前按钮,然后使用`previousElementSibling`属性来获取该按钮的前一个兄弟元素,即相应聊天窗口中的输入框。
3. 使用`value`属性来获取输入框中的值。
4. 创建一个新的`li`元素,将输入框中的值作为其文本内容,并将其添加到相应聊天窗口中的信息列表中。
下面是一个示例代码,用于实现上述功能:
```javascript
function add(input) {
var value = input.value; // 获取输入框中的值
var list = input.nextElementSibling; // 获取信息列表
var li = document.createElement("li"); // 创建新的li元素
li.textContent = value; // 设置li元素的文本内容
list.appendChild(li); // 将li元素添加到信息列表中
input.value = ""; // 清空输入框中的内容
}
```
在HTML代码中,需要将每个发送按钮的`onclick`属性设置为`add(this.previousElementSibling)`,以便在点击按钮时调用上述函数,并且将相应聊天窗口中的输入框作为参数传递给该函数。