当前位置: 首页 > news >正文

HTML 与 JavaScript 结合 “点击按钮弹出提示” 的交互功能

1. HTML 部分:创建按钮

<input id="save" name="save" type="button" value="保存">
  • <input> 是 HTML 中用于创建输入控件的标签。
  • type="button" 表示这是一个普通按钮(不是提交表单、重置表单等特殊类型的按钮)。
  • id="save":给按钮设置唯一的标识 id,方便后续 JavaScript 通过 id 获取这个按钮元素。
  • name="save":设置按钮的名称(多用于表单提交时传递数据,这里主要是配合 id 标识元素,实际交互核心靠 id)。
  • value="保存":设置按钮上显示的文字,用户看到的按钮上会显示 “保存” 二字。

2. JavaScript 部分:给按钮绑定 “点击事件”

<script language="javascript">
var save_btn=document.getElementById("save");
save_btn.onclick=function(){alert("单击了保存按钮");
}
</script>
  • <script language="javascript">:表示这段脚本是 JavaScript 代码。
  • var save_btn=document.getElementById("save");
    • document.getElementById("save") 是 JavaScript 中通过 id 获取页面元素的方法,这里会找到 HTML 中 id="save" 的那个按钮。
    • 把获取到的按钮元素赋值给变量 save_btn,方便后续操作这个按钮。
  • save_btn.onclick=function(){...}
    • onclick 是点击事件,表示 “当元素被点击时,执行后面的操作”。
    • 这里给 save_btn(也就是 “保存” 按钮)的 onclick 事件绑定了一个匿名函数(没有名字的函数)。
  • alert("单击了保存按钮");
    • alert() 是 JavaScript 中用于弹出提示框的方法。
    • 当按钮被点击时,就会弹出一个提示框,显示 “单击了保存按钮”。

http://www.dtcms.com/a/419126.html

相关文章:

  • 可以自己做免费网站吗怎么制作官网
  • 【Prompt学习技能树地图】单一思维链优化-自我一致性提示工程原理、实践与代码实现
  • 反转字符串---超全详细解
  • Java实现霍夫曼编码对文件解压缩
  • Kubernetes 中 ETCD 数据备份与恢复完整指南
  • Go 语言中指针介绍
  • 权重的网站建设网站有哪些内容
  • vxe-grid @edit-closed方法不被执行或者叫不触发
  • CF Yamakasi (前缀和+双指针)
  • 机器学习-第三章 线性模型
  • 新手想做网站赚钱app制作开发公司怎么收费
  • 现代Web存储技术(二):存储容量规划与传统方案对比
  • PyTorch实战(8)——图像描述生成
  • App Store 上架完整流程解析,iOS 应用发布步骤、ipa 文件上传工具、TestFlight 测试与苹果审核经验
  • stm32和Zynq的中断抢占机制
  • iOS App 混淆实战,在源码不可用情况下的成品加固与测试流程
  • Python爬虫技术:招标信息抓取与关键词过滤 (1)
  • 莞城网站推广wordpress图片并列排
  • 塘厦仿做网站wordpress和jwplayer
  • 嵌入式 - 内核驱动3 - class/device | misc | ioctl |device/driver
  • Matlab通过GUI实现点云的双边(Bilateral)滤波(附最简版)
  • 4-5〔O҉S҉C҉P҉ ◈ 研记〕❘ WEB应用攻击▸远程文件包含漏洞
  • 怎么在淘宝上做网站中交建设集团网站
  • 在线查看网站源码中国最新新闻
  • 轴状态读取(运动控制系列)
  • quic的拥塞控制
  • 【模型系列】Human-in-the-Loop
  • AI项目问题总结大全
  • 【linux内核驱动day03】
  • Accelerate基本使用