html中<button>绑定点击事件的三种方法

<button id = 'btn'>按钮</button>

1.原生写法

document.getElementById('btn').addEventListener('click',function(){
    alert('芝士雪豹')
});

2.jQuery写法

$('#btn').click(function(){
    alert('芝士雪豹')
})

3.onclick绑定

<button id = 'btn' onclick='btn()'>按钮</button>

function btn() {
    alert('芝士雪豹')
}

  • 8
    点赞
  • 34
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
可以通过绑定按钮的点击事件来实现这些功能。具体实现如下所示: ```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` 数组的所有元素移除,并将其显示在输出框。 这样,用户就可以通过这四个按钮来实现对输入框的文本进行添加、移除和显示的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值