我制作了一个函数，可以在两个元素的style.display之间切换为“ none”或“ block”。我在这里遇到的问题是“发送”按钮似乎具有与“切换”按钮相同的行为。这不是我指定要执行的操作。我想知道这是否与输入中出现的type =“ submit”有关。
https://jsfiddle.net/nragt3c4/
'use strict'
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>
我在Codepen中重建了您的小提琴：codepen.io/vac1911/pen/ZEYYBGm
发生的情况是#send输入正在提交表单，该表单将向无效目标创建HTTP请求。 jsFiddle通过重置小提琴来解决此问题，而Codepen通过将其吓坏来解决这一问题。