<form> 中<input type=button>事件能正常运行 <button>标签事件不能运行，为什么

时间: 2023-08-17 18:30:55 浏览: 50
这是因为 `<input>` 和 `<button>` 标签的默认行为不同。 对于 `<input type="button">` 标签，默认行为是不做任何事情，因此你可以在其上设置一个 JavaScript 事件来执行你的代码。 而对于 `<button>` 标签，默认行为是提交表单，因此如果你在其上设置一个 JavaScript 事件，它会在执行完事件后立即提交表单，从而导致你的事件无法正常运行。 如果你想在 `<button>` 标签上设置 JavaScript 事件，你需要在事件处理函数中使用 `event.preventDefault()` 来阻止默认的提交行为，例如： ``` <button onclick="myFunction(event)">点击我</button> <script> function myFunction(event) { event.preventDefault(); // 在这里写你的代码 } </script> ``` 这样就可以防止默认的提交行为，使你的 JavaScript 事件正常运行了。
相关问题

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2</title> </head> <body> <form> 账户:<input type="text" name="user"> <br> 密码:<input type="password" name="pwd"> </form> <form action=""> <p1>性别:</p1> <input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="female">女 </form> <form> <p1>兴趣:</p1> <input type="checkbox" name="interest" value="Front-end development">前端开发 <input type="checkbox" name="interest" value="Back-end development">后端开发 <input type="checkbox" name="interest" value="Art">美工 </form> <form action=""> <p1>学历:</p1> <select name="Education"> <option value="Bachelor degree or below">本科以下</option> <option value="Bachelor degree">本科毕业</option> <option value="Master degree">硕士毕业</option> <option value="Ph. D. graduate">博士毕业</option> </select> </form> <h11>个人简介:</h11> <br> <textarea rows="10" cols="50"> 在这里输入内容... </textarea> <form action=""> <input type="button" value="确定"> <input type="button" value="重置"> </form> </body> </html>使这段代码中的两个按钮点击后有反应

这段代码中的两个按钮是没有任何功能的，需要添加 JavaScript 代码来实现点击后的反应。可以使用 addEventListener 方法来监听按钮的点击事件，然后在回调函数中添加相应的逻辑代码。例如，可以在确定按钮被点击时弹出一个提示框，显示用户填写的信息，而在重置按钮被点击时清空表单中的所有内容。以下是示例代码： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2</title> </head> <body> <form> 账户:<input type="text" name="user"> <br> 密码:<input type="password" name="pwd"> </form> <form action=""> <p1>性别:</p1> <input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="female">女 </form> <form> <p1>兴趣:</p1> <input type="checkbox" name="interest" value="Front-end development">前端开发 <input type="checkbox" name="interest" value="Back-end development">后端开发 <input type="checkbox" name="interest" value="Art">美工 </form> <form action=""> <p1>学历:</p1> <select name="Education"> <option value="Bachelor degree or below">本科以下</option> <option value="Bachelor degree">本科毕业</option> <option value="Master degree">硕士毕业</option> <option value="Ph. D. graduate">博士毕业</option> </select> </form> <h11>个人简介:</h11> <br> <textarea rows="10" cols="50"> 在这里输入内容... </textarea> <form action=""> <input type="button" value="确定" id="submitBtn"> <input type="button" value="重置" id="resetBtn"> </form> <script> var submitBtn = document.getElementById("submitBtn"); var resetBtn = document.getElementById("resetBtn"); submitBtn.addEventListener("click", function() { var user = document.getElementsByName("user")[0].value; var pwd = document.getElementsByName("pwd")[0].value; var sex = document.getElementsByName("sex")[0].checked ? "男" : "女"; var interests = []; var interestElems = document.getElementsByName("interest"); for (var i = 0; i < interestElems.length; i++) { if (interestElems[i].checked) { interests.push(interestElems[i].value); } } var education = document.getElementsByName("Education")[0].value; var intro = document.getElementsByTagName("textarea")[0].value; var msg = "账户：" + user + "\n密码：" + pwd + "\n性别：" + sex + "\n兴趣：" + interests.join(", ") + "\n学历：" + education + "\n个人简介：" + intro; alert(msg); }); resetBtn.addEventListener("click", function() { document.getElementsByName("user")[0].value = ""; document.getElementsByName("pwd")[0].value = ""; document.getElementsByName("sex")[0].checked = true; document.getElementsByName("interest")[0].checked = false; document.getElementsByName("interest")[1].checked = false; document.getElementsByName("interest")[2].checked = false; document.getElementsByName("Education")[0].selected = true; document.getElementsByTagName("textarea")[0].value = "在这里输入内容..."; }); </script> </body> </html> ```

<script type="text/javascript"> function validate(){ account = document.loginForm.account.value; password = documnet.loginForm.password.value; if(account==”“){ alert("账号")； documnet.loginForm.account.focus(); return; } else if(password==""){ alert("密码")； documnet.loginForm.password.focus(); return; } document.loginForm.submit(); } </script><form name="loginForm"> 用户名：<input name="account" type="text"><br> 密码：<input name="password" type="password"><br> 电话：<input type="tel"><br> 地址：<input type="text"><br> <input type="button" onclick="validate()" value="登录"> <a href = "历史订单.html">注册</a> <a href = "商品列表.html">返回</a> </form>这个转化成JavaScript语言

这段代码已经是 JavaScript 语言了，不需要再转化了。但是，代码中有一些错误： 1. `documnet` 应该是 `document`。 2. `alert("账号")；` 和 `alert("密码")；` 中的中文句号应该改成英文句号。 3. `<input type="button" onclick="validate()" value="登录">` 中的 `onclick` 应该改成 `onclick=""`，以免被浏览器拦截。 下面是修改后的代码： ```html <script type="text/javascript"> function validate() { account = document.loginForm.account.value; password = document.loginForm.password.value; if(account == "") { alert("请输入账号。"); document.loginForm.account.focus(); return; } else if(password == "") { alert("请输入密码。"); document.loginForm.password.focus(); return; } document.loginForm.submit(); } </script> <form name="loginForm"> 用户名：<input name="account" type="text"><br> 密码：<input name="password" type="password"><br> 电话：<input type="tel"><br> 地址：<input type="text"><br> <input type="button" onclick="validate()" value="登录"> <a href="历史订单.html">注册</a> <a href="商品列表.html">返回</a> </form> ```

相关推荐

html

html表单<form></form>

<input name="uid" type="text" value="" maxlength="20"/> <input name="pwd" type="password" value="" maxlength="10"/> <input name="gender" type="radio" value="f"/>nan <input name="gender" ...
pdf

解决layui中的form表单与button的点击事件冲突问题

layui的form表单位置和button标签的位置重合，会使得button的click事件得不到响应，如图： 蓝色底为form的位置，“重新搜索”为<button>标签的位置，此时，button标签的click事件无法响应。 必须将form的宽度...
pdf

JS中type=”button”和type=”submit”的区别

　(1)Submit将表单提交(form.submit())作为其onclick后的默认事件，Button并非如此 　(2)表单提交时，所有具有name属性的html输入元素(包括input标签、button标签、select标签等)都将作为键值对提交，除了Submit对象...

<form>里的<input type="submit" value="Submit">和我直接定义的一个<button type="button" onclick="sendData(1)">点亮 LED</button> 的区别是什么

<input>标签的type属性默认值为submit，所以如果您不指定该属性，该元素将被渲染成一个提交按钮。 <button type="button">是一个普通按钮，它不会自动提交表单。当用户单击该按钮时，可以执行任何...

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>信息填写</title> <script> window.onload = function() { var oBtn = document.getElementById("btn") oBtn.onclick = function () { alert("提交成功"); }; } </script> </head> <body> 信息填写 <form method="post"> 姓名:<input type="text" />

账号:<input type="text" />

密码:<input type="password" />

<form method="post"> 性别: <input type="radio" name="gender" value="男" />男 <input type="radio" name="gender" value="女" />女 </form>
<select> <option>HTML</option> <option>CSS</option> <option>jquery</option> <option>javascript</option> <option>vue.js</option> </select>

<input Id="btn" type="button" value="提交" /> </body> </html> 请改进这段代码

这段代码有一些问题，我来逐个指出并提供改进的方案： 1. 没有为表单元素设置name属性，导致表单提交时无法获取表单数据。... <input id="btn" type="button" value="提交"> </form> </body> </html>

优化 这段代码 <form> 请选择您喜欢的颜色： <input type="radio" name="color" value="red"> 红色
<input type="radio" name="color" value="green"> 绿色
<input type="radio" name="color" value="blue"> 蓝色

请选择您喜欢的水果： <input type="radio" name="fruit" value="apple"> 苹果
<input type="radio" name="fruit" value="banana"> 香蕉
<input type="radio" name="fruit" value="orange"> 橙子

<input type="submit" value="提交"> </form> <script> function onHHH(e) { console.log(e); } </script>

2. 将 input 标签的 type 属性设置为 button，避免表单默认提交行为。 3. 使用事件委托，将事件处理程序绑定到父元素上，减少事件处理程序的数量。 优化后的代码如下： <form> <p>请选择您喜欢的颜色：</p> ...

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仓库管理系统</title> </head> <body> 仓库管理系统 <form> <label>仓库名称:</label> <input type="text" id="name"> <label>库存数量:</label> <input type="number" id="quantity"> <button type="button" onclick="addWarehouse()">添加仓库</button> <button type="button" onclick="updateWarehouse()">更新仓库</button> <button type="button" onclick="deleteWarehouse()">删除仓库</button> </form>
仓库列表 <script src="script.js"></script> </body> </html>给这段代码添加注释

<button type="button" onclick="updateWarehouse()">更新仓库</button> <button type="button" onclick="deleteWarehouse()">删除仓库</button> </form> <!-- 水平分割线 --> <hr> <!-- 二级标题 --> <h2>...

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> <script type="text/javascript" src="js/jquery-1.12.4.js" ></script> </head> <body> <form> <fieldset> 用户名：<input type="text" id="username" />
密码：<input type="text" id="password" />
</fieldset> </form> <button id="btn">登录</button> <script> </script> </body> </html> 写出此代码如何使用Ajax登录成功，同时写出其中文件的代码

<button id="btn">登录</button> <div id="dv"></div> <script> $(document).ready(function() { $("#btn").click(function() { var uname = $("#username").val(); var pwd = $("#password").val(); $.ajax...

优化这段代码 <!DOCTYPE html> <html> <head> <title>内部号申请</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> 内部号申请 <form> <label for="name">姓名:</label> <input type="text" id="name" name="name">

<label for="department">部门:</label> <input type="text" id="department" name="department">

<label for="position">职位:</label> <input type="text" id="position" name="position">

<label for="reason">申请原因:</label> <textarea id="reason" name="reason"></textarea>

<button type="submit">提交</button> </form> </body> </html>

这段代码已经很简单，但是还有一些可以优化的地方，例如： 1. 使用label标签来关联表单元素和标签，使得页面更加语义化，提高... <button type="submit" name="submit">提交</button> </form> </body> </html>

微信开发者工具代码如下<form bindsubmit="formSubmit" bindreset="formReset"> <view> 姓名:<input type="text" name="xingming" placeholder="请输入姓名" /> </view> <view> 密码:<input type="text" name="pwd" password="true" placeholder="请输入密码" /> </view> <radio-group name="sex"> <radio value="1">男</radio> <radio value="2">女</radio> </radio-group> <checkbox-group name="aihao"> <checkbox value="1">篮球</checkbox> <checkbox value="2">羽毛球</checkbox> </checkbox-group>formReset: function(e) { wx.showToast({ title: '数据已重置', duration: '1000' }) },为何点击重置无响应 <slider name="shengao" min="160" max="200" show-value="true"></slider> <button form-type="submit">提交</button> <button form-type="reset">重置</button> </form>

经过查看你提供的代码，我发现重置... <button form-type="submit">提交</button> <button form-type="reset">重置</button> </form> 同时，你需要确保在代码中定义了formReset方法，以便重置按钮正确响应。

<input type="text" name="aoi_step" value="3"> <input type="text" name="defect_type" value="Particle"> <input type="text" name="layer_code" value="ACT"> <input type="text" name="type" value="Particle"> <input type="text" name="dpet" value="ACT"> <input type="text" name="subcode" value="Particle"> <input type="text" name="code_description" value="ACT">我需要在超过设置的列宽时自动换行，或者回车换行，回车按钮不绑定提交按钮<form action="unload.php" method="POST" enctype="multipart/form-data"><button type="submit">提交</button>

要在超过设置的列宽时自动... <button type="submit">提交</button> </form> 这样，在点击提交按钮时，表单数据将被提交到 unload.php 文件中进行处理。 希望这能解决你的问题。如果还有其他疑问，请随时提问。

<!DOCTYPE html> <html> <head> <title>Login</title> </head> <body> Login <form action="/login" method="post"> <label for="username">Username:</label> <input type="text" id="username" name="username">

<label for="password">Password:</label> <input type="password" id="password" name="password">

<input type="submit" value="Submit"> </form> </body> </html> 增加取消按钮

要在上述代码中添加一个取消按钮，可以在 <form> 标签的后面插入一个 <input> 标签。以下是修改后的代码： html <!DOCTYPE html> <html> <head> <title>Login</title> </head> <body> <h1>Login</h1> ...

<body> 注册界面 <form name="loginfrm" action="Register" method="post" class="margin" onsubmit="return a()"> 用户名: <input type="text" name="username" class="textrange"> 密    码: <input type="password" name="password1" class="textrange"> 新密码: <input type="password" name="password2" class="textrange"> <input name="button" type="submit" value="注册" > </form> </body>美化这段代码

<input type="text" name="username" id="username" class="input-text"> </div> <div class="form-group"> <label for="password1">密码:</label> <input type="password" name="password1" id=...

生成一段css代码来让适当地修饰如下登录的表单<form action="../ULoginServlet" method = "post"> 用户名：<input type="text" name = "uname">
密 码：<input type ="text" name = "pwd">
<button>登录</button><button>重置</button>
</form> 没有账号？去注册

以下是一个简单的 CSS ... <button>登录</button><button>重置</button> <br> </form> <a href="UserReg.jsp" class="register-link">没有账号？去注册</a> 这将使您的登录表单看起来更美观，并使其更易于使用。

生成一段css代码来让适当地修饰如下登录的表单<form action="../ULoginServlet" method = "post"> 用户名：<input type="text" name = "uname">
密 码：<input type ="text" name = "pwd">
<button>登录</button><button>重置</button>
</form> 没有账号？去注册

以下是一个简单的 CSS ... <button>登录</button><button>重置</button> <br> </form> <a href="UserReg.jsp" class="register-link">没有账号？去注册</a> 这将使您的登录表单看起来更美观，并使其更易于使用。

在下面这段html代码中加JS代码实现全选功能、取消功能、反选功能、提交按钮吗？<body> <form action="#"> 请选择你的爱好： <input type="checkbox" id="check-all" /> 全选 <input type="checkbox" name="hobby" value="学习"> 学习 <input type="checkbox" name="hobby" value="睡觉"> 睡觉 <input type="checkbox" name="hobby" value="健身"> 健身 <input type="checkbox" name="hobby" value="玩耍"> 玩耍 <button type="button" id="all">全选</button> <button type="button" id="no">取消</button> <button type="button" id="reverse">反选</button> <button type="button" id="send">提交</button> </form> </body>

const checkboxes = document.querySelectorAll('input[type="checkbox"][name="hobby"]'); const btnAll = document.getElementById('all'); const btnNo = document.getElementById('no'); const btnReverse = ...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form name="f1"> <textarea name="t1"></textarea>
<input type="button" value="启用" onclick="document.f1.t1.disabled=false;"> <input type="button" value="禁用" onclick="document.f1.t1.disabled=true;"> </form> </body> </html>如何让这段代码的按钮点击之后就变色

<input type="button" value="启用" onclick="document.f1.t1.disabled=false;this.style.backgroundColor='red'"> <input type="button" value="禁用" onclick="document.f1.t1.disabled=true;this.style....

最新推荐

recommend-type

zigbee-cluster-library-specification

最新的zigbee-cluster-library-specification说明文档。
recommend-type

管理建模和仿真的文件

管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
recommend-type

实现实时数据湖架构：Kafka与Hive集成

![实现实时数据湖架构：Kafka与Hive集成](https://img-blog.csdnimg.cn/img_convert/10eb2e6972b3b6086286fc64c0b3ee41.jpeg) # 1. 实时数据湖架构概述** 实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势： - **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。 - **数据民主化：**实时数据湖使各种利益相关者都可
recommend-type

解释minorization-maximization (MM) algorithm，并给出matlab代码编写的例子

Minorization-maximization (MM) algorithm是一种常用的优化算法，用于求解非凸问题或含有约束的优化问题。该算法的基本思想是通过构造一个凸下界函数来逼近原问题，然后通过求解凸下界函数的最优解来逼近原问题的最优解。具体步骤如下： 1. 初始化参数 $\theta_0$，设 $k=0$； 2. 构造一个凸下界函数 $Q(\theta|\theta_k)$，使其满足 $Q(\theta_k|\theta_k)=f(\theta_k)$； 3. 求解 $Q(\theta|\theta_k)$ 的最优值 $\theta_{k+1}=\arg\min_\theta Q(
recommend-type

JSBSim Reference Manual

JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。
recommend-type

"互动学习：行动中的多样性与论文攻读经历"

多样性她- 事实上SCI NCES你的时间表ECOLEDO C Tora SC和NCESPOUR l’Ingén学习互动，互动学习以行动为中心的强化学习学会互动，互动学习，以行动为中心的强化学习计算机科学博士论文于2021年9月28日在Villeneuve d'Asq公开支持马修·瑟林评审团主席法布里斯·勒菲弗尔阿维尼翁大学教授论文指导奥利维尔·皮耶昆谷歌研究教授：智囊团论文联合主任菲利普·普雷教授，大学。里尔/CRISTAL/因里亚报告员奥利维耶·西格德索邦大学报告员卢多维奇·德诺耶教授，Facebook /索邦大学审查员越南圣迈IMT Atlantic高级讲师邀请弗洛里安·斯特鲁布博士，Deepmind对于那些及时看到自己错误的人...3谢谢你首先，我要感谢我的两位博士生导师Olivier和Philippe。奥利维尔，"站在巨人的肩膀上"这句话对你来说完全有意义了。从科学上讲，你知道在这篇论文的（许多）错误中，你是我可以依
recommend-type

实现实时监控告警系统：Kafka与Grafana整合

![实现实时监控告警系统：Kafka与Grafana整合](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9BVldpY3ladXVDbEZpY1pLWmw2bUVaWXFUcEdLT1VDdkxRSmQxZXB5R1lxaWNlUjA2c0hFek5Qc3FyRktudFF1VDMxQVl3QTRXV2lhSWFRMEFRc0I1cW1ZOGcvNjQw?x-oss-process=image/format,png) # 1.1 Kafka集群架构 Kafka集群由多个称为代理的服务器组成，这
recommend-type

帮我实现在Androidstudio调用chapgpt并提供源码

首先，你需要运行一个ChitGPT的服务器，然后通过Android应用程序与该服务器进行通信。以下是一个简单的Android应用程序示例，可以与ChitGPT进行通信： 1. 首先，在Android Studio中创建一个新的项目，并添加以下依赖项： ``` implementation 'com.squareup.okhttp3:okhttp:4.9.0' implementation 'com.google.code.gson:gson:2.8.6' ``` 2. 创建一个新的Java类，用于与ChitGPT服务器通信。以下是一个简单的实现： ```java import com.
recommend-type

c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf

校园超市商品信息管理系统课程设计旨在帮助学生深入理解程序设计的基础知识，同时锻炼他们的实际操作能力。通过设计和实现一个校园超市商品信息管理系统，学生掌握了如何利用计算机科学与技术知识解决实际问题的能力。在课程设计过程中，学生需要对超市商品和销售员的关系进行有效管理，使系统功能更全面、实用，从而提高用户体验和便利性。 学生在课程设计过程中展现了积极的学习态度和纪律，没有缺勤情况，演示过程流畅且作品具有很强的使用价值。设计报告完整详细，展现了对问题的深入思考和解决能力。在答辩环节中，学生能够自信地回答问题，展示出扎实的专业知识和逻辑思维能力。教师对学生的表现予以肯定，认为学生在课程设计中表现出色，值得称赞。 整个课程设计过程包括平时成绩、报告成绩和演示与答辩成绩三个部分，其中平时表现占比20%，报告成绩占比40%，演示与答辩成绩占比40%。通过这三个部分的综合评定，最终为学生总成绩提供参考。总评分以百分制计算，全面评估学生在课程设计中的各项表现，最终为学生提供综合评价和反馈意见。 通过校园超市商品信息管理系统课程设计，学生不仅提升了对程序设计基础知识的理解与应用能力，同时也增强了团队协作和沟通能力。这一过程旨在培养学生综合运用技术解决问题的能力，为其未来的专业发展打下坚实基础。学生在进行校园超市商品信息管理系统课程设计过程中，不仅获得了理论知识的提升，同时也锻炼了实践能力和创新思维，为其未来的职业发展奠定了坚实基础。 校园超市商品信息管理系统课程设计的目的在于促进学生对程序设计基础知识的深入理解与掌握，同时培养学生解决实际问题的能力。通过对系统功能和用户需求的全面考量，学生设计了一个实用、高效的校园超市商品信息管理系统，为用户提供了更便捷、更高效的管理和使用体验。 综上所述，校园超市商品信息管理系统课程设计是一项旨在提升学生综合能力和实践技能的重要教学活动。通过此次设计，学生不仅深化了对程序设计基础知识的理解，还培养了解决实际问题的能力和团队合作精神。这一过程将为学生未来的专业发展提供坚实基础，使其在实际工作中能够胜任更多挑战。
recommend-type

关系数据表示学习

关系数据卢多维奇·多斯桑托斯引用此版本：卢多维奇·多斯桑托斯。关系数据的表示学习机器学习[cs.LG]。皮埃尔和玛丽·居里大学-巴黎第六大学，2017年。英语。NNT：2017PA066480。电话：01803188HAL ID：电话：01803188https://theses.hal.science/tel-01803188提交日期：2018年HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaireUNIVERSITY PIERRE和 MARIE CURIE计算机科学、电信和电子学博士学院（巴黎）巴黎6号计算机科学实验室D八角形T HESIS关系数据表示学习作者：Ludovic DOS SAntos主管：Patrick GALLINARI联合主管：本杰明·P·伊沃瓦斯基为满足计算机科学博士学位的要求而提交的论文评审团成员：先生蒂埃里·A·退休记者先生尤尼斯·B·恩