Javascript隐藏和删除多个div出错

Question

我一直在写这个页面，但还没有完成。它目前只包含html和javascript。

当复选框输入被选中时，它必须显示无线电输入。在单击manual时，它必须显示id为custom的div。如果点击了auto，它必须显示带有"what"的id。

这是我的代码：

window.onload = function () {
document.getElementById('man').style.display = 'none';
document.getElementById('what').style.display = 'none';
document.getElementById('custom').style.display = 'none';
};
function showMan() {
var x = document.getElementById("man");
x.style.display = "none";
}
function hideMan() {
var x = document.getElementById("man");
x.style.display = "block";
}
function showWhat() {
var x = document.getElementById("what");
x.style.display = "none";
}
function hideWhat() {
var x = document.getElementById("what");
x.style.display = "block";
}
function showCustom() {
var x = document.getElementById("custom");
x.style.display = "none";
}
function hideCustom() {
var x = document.getElementById("custom");
x.style.display = "block";
}
function calc() {
if (document.getElementById('check').checked) {
hideMan();
showCustom();
} else {
showMan();
hideCustom();
}
}
function kaas() {
if (document.getElementById('manual').checked) {
showWhat();
} else if (document.getElementById('auto').checked) {
hideWhat();
}
}
function countLines(theArea) {
var theLines = theArea.value.replace((new RegExp(".{" + theArea.cols + "}", "g")), "n").split("n");
if (theLines[theLines.length - 1] == "") theLines.length--;
document.getElementById("count").innerHTML = `${theLines.length} account(s)`;
}

<form>
<div class="container">
<div class="row">
<div class="col-sm">
Title:
<br>
<input type="text" name="title">
<br>
<br> Accounts (One per line):
<br>
<textarea name="accounts" onKeyUp="countLines(this)" rows="20" cols="40"></textarea>
<br>
<p id="count"></p>
</div>
<div class="col-sm">
Check all of my accounts (Costs 1$ per 100 accounts)
<br>
<input type="checkbox" name="checkIt" value="1" id="check" onclick="calc();">Yes
<br>
<div id="man">
<input type="radio" name="method" value="manual" checked="checked" id="manual" onclick="kaas();"> Manual check
<br>
<input type="radio" name="method" value="automatic" id="auto" onclick="kaas();"> Automatic check
<br>
</div>
<div id="custom">
Give us the url of the site your accounts come from
<input type="text" name="site">
</div>
<div id="what">
<select name="site">
<option value="Netflix">Netflix</option>
<option value="Spotify">Spotify</option>
<option value="Roblox">Roblox</option>
<option value="Minecraft">Minecraft</option>
</select>
</div>
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
</form>

我相信有一种更简单的方法可以使这项工作成功。很抱歉有错别字或没有标记东西，但我现在在iPad上。所以这有点困难。

谢谢你的帮助，Aaron

Answer 1

我刚刚重写了你的代码并清理了它。请尽量让代码更干净，写得更容易理解！

<form>
<div class="container">
<div class="row">
<div class="col-sm">
Title:
<br>
<input type="text" name="title">
<br><br>
Accounts (One per line):
<br>
<textarea name="accounts" onKeyUp="countLines(this)" rows="20" cols="40"></textarea>
<br>
<p id="count"></p>
</div>
<div class="col-sm">
Check all of my accounts (Costs 1$ per 100 accounts)<br>
<input type="checkbox" name="checkIt" value="1" id="check" onclick="calc();">Yes
<br>
<div id="man">
<input type="radio" name="method" value="manual" checked="checked" id="manual" onclick="kaas();"> Manual check<br>
<input type="radio" name="method" value="automatic" id="auto" onclick="kaas();"> Automatic check<br>
</div>
<div id="custom">
Give us the url of the site your accounts come from
<input type="text" name="site">
</div>
<div id="what">
<select name="site">
<option value="Netflix">Netflix</option>
<option value="Spotify">Spotify</option>
<option value="Roblox">Roblox</option>
<option value="Minecraft">Minecraft</option>
</select>
</div>
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
</form>
<script type="text/javascript">
function displayTheElement(id, display=false) {
if (display) {
document.getElementById(id).style.display = "block";
} else {
document.getElementById(id).style.display = "none";
}
}
window.onload = function () {
displayTheElement('man', false);
displayTheElement('what', false);
displayTheElement('custom', false);
calc();
};
function calc () {
if (document.getElementById('check').checked) {
displayTheElement('man', true);
displayTheElement('custom', false);
kaas();
} else {
displayTheElement('man', false);
displayTheElement('custom', true);
}
}
function kaas() {
if (document.getElementById('manual').checked) {
displayTheElement('what', true);
} else {
displayTheElement('what', false);
}
}
function countLines(theArea){
var theLines = theArea.value.replace((new RegExp(".{"+theArea.cols+"}","g")),"n").split("n");
if(theLines[theLines.length-1]=="") theLines.length--;
document.getElementById("count").innerHTML = `${theLines.length} account(s)`;
}
</script>

但关于你的错误：

1. 当您更改相关输入的值时，会触发kaas方法，但在第一次加载时，它有值(选中或选中(，所以您必须考虑它
2. 您的呼叫处于错误的层次结构中，只需查看下面的代码并尝试找出它

Answer 2

查看代码，如果单击手动复选框，它将触发函数kaas。按照从那里向后的逻辑，"custom"元素永远不会被显示。我认为你只需要清理你的函数调用，它们可能会被混淆。尝试使用浏览器控制台和console.log("函数kaas正在运行！"(；以跟踪每个函数。