javascript - querySelector 似乎正在从输入 id "#submit"和另一个输入类型 ="submit"识别 ="submit"-6ren

javascript - querySelector 似乎正在从输入 id "#submit"和另一个输入类型 ="submit"识别 ="submit"

转载作者：行者123 更新时间：2023-12-02 22:22:58

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

文章推荐： sql-server - 如何从大表(sql server)中快速删除大量数据

文章推荐： c# - RavenDB 和复合模式

文章推荐： SQL Server 2008 : should I be using Windows auth or SQL Server auth?

文章推荐： php - Wordpress - 生成帖子的 PDF

JavaScript:querySelector Null 与 querySelector
这两种引用方法的主要区别是什么？使用其中一种有什么好处？另外，它们各自最适合哪种用例？ var selection = document.querySelector('.selector') !==
polymer - document.querySelector 与 Polymer.dom(this.$).querySelector
对于下面给出的代码，document.querySelector('createButton') 和 Polymer.dom(this.$).querySelector('createButton')
javascript - element.querySelector() 与 document.querySelector() 有区别吗？
查看 mdn“querySelector”会在两个部分下弹出，但它们似乎都达到了相同的目的。哪一个是不同情况的理想选择？ ...或者它们基本上在功能上是相同的？ https://developer.m
javascript - document.querySelector 和 document.body.querySelector 有什么区别？
这个问题已经有答案了: Is element.querySelector() different from document.querySelector()? (2 个回答) 已关闭 3 年前。当我
javascript - 为什么 Document.querySelector 比 Element.querySelector 更高效
我做了几次迭代测试来测试 Document.querySelector 的效率和 Element.querySelector . 标记: 脚本: 查询 Document.querySelec
javascript - 如何使用 document.querySelector 从使用 document.querySelector 的节点中选择特定的文本输出？
如何使用 document.querySelectorAll() 从下面的代码中选择特定的文本输出？我想在变量中捕获结果，并尝试使用以下代码来实现: let result = document.qu
html - QuerySelector 中的单引号
HTML 2018-2019 如何使用 CSS 选择器定位元素 onclick 我试过下面的代码但不工作 ie.document.querySelector("[onclick='loadYearPa
Javascript + queryselector 支持所有带有类名的特殊字符
通常在 javascript 中使用查询选择器时，我们会这样做， ABCD var className = 'abcd'; var x = document.querySelector('.'+cla
javascript - querySelector 方法已过时？
我目前正在学习 querySelector方法，惊讶地发现它被归类为过时了这是 screenshot 的链接 querySelector 方法真的已经过时了吗？若有，原因为何？应该使用什么方法呢？
javascript - querySelector() 返回静态节点列表或事件节点列表
MDN 指定的 querySelectorALL() 不支持事件节点并且仅返回静态节点。 MDN querySelectorALL querySelector() 是否支持活节点 MDN 没有指定任何
JavaScript 文档.querySelector()
这个问题在这里已经有了答案: What does this `…${…}…` code in the node docs mean? [duplicate] (1 个回答) 关闭 6 年前。我是
javascript - querySelector 有什么问题
根据下面的书面代码，当单击具有 keyCode 65 的“a”时，预期结果应该是在控制台中返回 DOM 元素“”。当我运行代码并检查它时，它在控制台中返回 null。部分源码: wind
javascript - querySelector() - 第一个内部元素
我正在使用 SVG.js select() 函数，它使用 querySelector() 函数。目前，我使用的命令是:select("[id='1']")(1可以用其他数字代替) 我想做的是选择该元
javascript - QuerySelector 设置文本值
我有这个循环应该设置值为无并更新占位符。当我登录节点时它工作正常但是 value和 placeholder没有更新？怎么了？数据是一个 JSON 对象。 var data = {"password
Javascript QuerySelector 不适用于 for with [i]
我正在尝试使用 QuerySelector 获取数据表单中每个评论的值。有一个“添加”按钮，允许显示另一个元素并将元素的名称增加 +1。例如，第一个评论的名称为“comment0”，第二个评论的名称为
javascript - 缓存与 .querySelector
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 7 年前。 Improv
javascript - querySelector() 组合多个属性选择器
我有一个具有以下格式类的输入字段: some_starting_constant_string somevariablestring some_ending_constant_string 所以我想要
javascript - querySelector，获取属性以给定字符串开头的元素
我正在寻找一种方法来查找包含以给定字符串开头的属性的所有元素。例如: document.querySelectorAll('[ng-*]') 将返回带有 Angular 指令的所有元素(ng-clic
javascript - querySelector() 不适用于所有类
我的第一列应该是实际日期，但我的 js 脚本仅适用于我的 html 代码中的一个类。问题:如何使我的js代码适用于html代码中的每个类，我使用querySelector()，但我应该使用类似$(t
javascript - 特定元素之后的 querySelector
有没有办法使用 CSS 选择器来选择出现在给定元素之后的元素。假设我有一个像这样的 DOM A next span the target next span

首页

博学

6Ren·AI

商城

javascript - querySelector 似乎正在从输入 id "#submit"和另一个输入类型 ="submit"识别 ="submit"