<form> <textarea name="" id="" cols="30" rows="10">山东 深圳 </textarea> <button >添加一个</button> <button >全部添加</button> <button >返回添加</button> <button >返回全部</button> <textarea name="" id="" cols="30" rows="10"></textarea> </form> <script> let button = document.querySelectorAll('.button') let textarea = Document.querySelectorAll('.textarea') 根据这行代码 实现来回添加 全部添加
时间: 2023-10-25 09:06:31 浏览: 50
可以通过绑定按钮的点击事件来实现这些功能。具体实现如下所示:
```html
<form>
<textarea id="input" cols="30" rows="10"></textarea>
<button id="addOne">添加一个</button>
<button id="addAll">全部添加</button>
<button id="returnOne">返回添加</button>
<button id="returnAll">返回全部</button>
<textarea id="output" cols="30" rows="10"></textarea>
</form>
<script>
const input = document.getElementById('input')
const output = document.getElementById('output')
const addOneBtn = document.getElementById('addOne')
const addAllBtn = document.getElementById('addAll')
const returnOneBtn = document.getElementById('returnOne')
const returnAllBtn = document.getElementById('returnAll')
let addedItems = []
addOneBtn.addEventListener('click', () => {
const newItem = input.value.trim()
if (newItem) {
addedItems.push(newItem)
output.value = newItem
input.value = ''
}
})
addAllBtn.addEventListener('click', () => {
const items = input.value.trim().split(/\s+/)
addedItems = [...addedItems, ...items]
output.value = addedItems.join('\n')
input.value = ''
})
returnOneBtn.addEventListener('click', () => {
const lastItem = addedItems.pop()
if (lastItem) {
output.value = lastItem
}
})
returnAllBtn.addEventListener('click', () => {
output.value = addedItems.join('\n')
addedItems = []
})
</script>
```
这个示例代码中,我们首先获取到需要操作的元素,包括输入框、输出框和四个按钮。然后,我们定义了一个数组 `addedItems` 用于存储添加的条目。在每个按钮的点击事件中,我们根据按钮的功能来对输入框和输出框进行操作,并更新 `addedItems` 数组的内容。
其中,“添加一个”按钮会将输入框中的文本添加到 `addedItems` 数组中,并将其显示在输出框中;“全部添加”按钮会将输入框中的所有文本按照空格分隔后添加到 `addedItems` 数组中,并将其显示在输出框中;“返回添加”按钮会将 `addedItems` 数组中最后一个元素移除,并将其显示在输出框中;“返回全部”按钮会将 `addedItems` 数组中的所有元素移除,并将其显示在输出框中。
这样,用户就可以通过这四个按钮来实现对输入框中的文本进行添加、移除和显示的功能。