个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我创建了一个函数来在两个元素的 style.display 之间切换为“none”或“block”。我在这里遇到的问题是“发送”按钮似乎与“切换”按钮具有相同的行为。这不是我指定它要做的事情。我想知道这是否与输入中存在 type="submit"有关。
let binary = document.querySelector('#submit')
binary.addEventListener('click', toggler);
function toggler() {
let phaseTwo = document.querySelector('.phasetwo');
let phaseOne = document.querySelector('.phaseone');
if (phaseOne.style.display == "none") {
phaseTwo.style.display = "none";
phaseOne.style.display = "block";
} else {
phaseTwo.style.display = "block";
phaseOne.style.display = "none";
}
}.phaseone {
display: block;
}
.phasetwo {
display: none;
}<!DOCTYPE html>
<html>
<head>
<title>html</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div class="phaseone">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="phasetwo">
<form id="moveConfig"class="config">
Red: <br>
<input type="text" name="" placeholder="5000"> ms <br>
Yellow: <br>
<input type="text" name="" placeholder="3000"> ms <br>
Green: <br>
<input type="text" name="" placeholder="5000"> ms <br>
<input id="send" type="submit" value="send">
</form>
</div>
<input id="submit" type="submit" name="" value="toggle">
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>最佳答案
是的，“相同行为”的原因是发送按钮上的属性 type="submit"。
它实际上所做的是提交表单并刷新它。
修复方法:
type=button并通过JS处理按钮点击。按钮类型默认不会提交表单。这是更新后的代码片段:
let binary = document.querySelector('#submit')
binary.addEventListener('click', toggler);
function toggler() {
let phaseTwo = document.querySelector('.phasetwo');
let phaseOne = document.querySelector('.phaseone');
if (phaseOne.style.display == "none") {
phaseTwo.style.display = "none";
phaseOne.style.display = "block";
} else {
phaseTwo.style.display = "block";
phaseOne.style.display = "none";
}
}.phaseone {
display: block;
}
.phasetwo {
display: none;
}<!DOCTYPE html>
<html>
<head>
<title>html</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div class="phaseone">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="phasetwo">
<form id="moveConfig"class="config">
Red: <br>
<input type="text" name="" placeholder="5000"> ms <br>
Yellow: <br>
<input type="text" name="" placeholder="3000"> ms <br>
Green: <br>
<input type="text" name="" placeholder="5000"> ms <br>
<input id="send" type="button" value="send">
</form>
</div>
<input id="submit" type="button" name="" value="toggle">
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>关于javascript - querySelector 似乎正在从输入 id "#submit"和另一个输入类型 ="submit"识别 ="submit"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59163438/
26
4
0
我创建了一个函数来在两个元素的 style.display 之间切换为“none”或“block”。我在这里遇到的问题是“发送”按钮似乎与“切换”按钮具有相同的行为。这不是我指定它要做的事情。我想知道
当我使用 validate.js 添加表单验证时，其验证正常并显示验证消息。但输入 type="submit"值在操作页面结构中显示两次。 为了说明，我有两个 .cfm 文件，index.cfm 具有
我有一个 s:form，里面有 sj:submit 和 s:submit，sj:submit 工作正常，但 s:submit 按钮不起作用。当我点击 s:submit 按钮时没有任何反应。 我尝试在表
参见http://jsfiddle.net/8KNc7/5/有关我正在讨论的内容的工作示例(目前在 Firefox 15 中进行测试，尚未尝试其他版本)。 我有一个带有 submit 输入和 butt
我有一个包含表单的 HTML 页面。我想做一些字段 "required" 。问题是我没有使用 在我的表单中，我使用 Javascript 函数来提交表单，因为我需要将 Javascript 变量发送到
如果用户提交表单，我想运行特定的 PHP block 。如果我使用带有 name="submit"的提交按钮并且: 我对 javascript 一无所知，我希望代码在用户更改下拉菜单时运行。如果我将
我有一个网站 www.abc.com，其中有一个页面 xyz.php。 xyz.php 采用表单提交事件读取数据并保存在数据库中。 www.abc.com 有一个针对 xyz.php 执行操作的表单。
这个问题在这里已经有了答案: JavaScript post request like a form submit (32 个答案) 关闭 9 年前。 我查看了不同的线程，但找不到合适的解决方案。
我有一个表单提交触发器和一个确认引导框，它显示在单击表单提交按钮上。在 bootbox 中确认如果用户同意我提交表单。我的问题是 onsubmit 在用户说是之前触发，并且当我在 bootbox 中调
我正在使用 JavaScript .submit() 函数提交我的表单。 form.submit(); 但是当我使用 addEventListener 来捕获我的提交事件时，它不起作用。 form.a
编辑:在考虑回答问题之前，请仔细阅读问题的所有内容。我既不是在生产代码中使用内联事件处理程序的可取性，也不是在实现我所引用的文章所 promise 的结果的最佳方法。这是关于Javascript语义和
这是我的形式，对我来说看起来不错。在这种形式中，我放置了这个按钮: 这是它调用的函数: function confirmSubmit() { // get the number of st
以下哪个 CSS 选择器更快？ input[type="submit"] { /* styles */ } 或 [type="submit"] { /* styles */ } 只是好
在表单上添加提交按钮的符合标准的正确语义方式是什么？我不需要按钮中的图像或背景，只需要简单的文本，也许是带弯 Angular 的渐变背景(使用 CSS3)。这些是我所知道的方法: click her
我的 App.js 包含以下代码: var app = angular.module('githubApp', []); 我有 githubAppController 和以下代码: app.contr
jQuery 允许通过以下任一方式以编程方式触发表单提交: $('.js-form-class-hook').submit(); $('.js-form-class-hook').trigger('s
我有一个表单，其中一个按钮使用 onClick 事件提交。 " 此外，我有一个输入，当输入处于焦点状态时按下回车键时会触发 couponButton。 虽然它们都触发相同的事件 (.submit()
目前只是尝试实现这些按钮:http://web.archive.org/web/20110721191046/http://particletree.com/features/rediscoverin
我正在提交我的第一个构建以供 TestFlight beta 审查，在创建一个组后，添加 4 名团队成员添加我的构建，取消单击该框以表示我需要登录信息来测试该应用程序，我单击“提交”审查。” iTun
我有一个带有 onsubmit 属性的表单。我需要绑定(bind)一个新的提交事件，并且我需要在任何现有提交函数之前执行此事件。 下面的代码演示了这个问题。 Test
我是一名优秀的程序员,十分优秀！