Question

我做了一个函数，可以在两个元素的样式之间切换。显示为“无”或“阻止”。我在这里遇到的问题是“发送”按钮似乎具有与“切换”按钮相同的行为。这不是我指定要执行的操作。我想知道这是否与输入中出现的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>

Answer 1

是的，“相同行为”的原因是发送按钮上的属性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>

Answer 2

我在Codepen中重新创建了您的小提琴：codepen.io/vac1911/pen/ZEYYBGm

正在发生的事情是#send输入正在提交表单，该表单将向无效目标创建HTTP请求。 jsFiddle通过重置小提琴来解决此问题，而Codepen通过将其吓坏来解决这一问题。

querySelector似乎从输入id =“ submit”和另一个输入类型=“ submit”识别“ #submit”

2 个答案: