Javascript隐藏和删除多个div出错

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

选中复选框输入后，它必须显示收音机输入。单击manual时，它必须显示id为custom的div。如果单击了“自动”，则会显示带有“what”的id

这是我的密码：

window.onload=函数（）{
document.getElementById（'man'）.style.display='none'；
document.getElementById（'what'）.style.display='none'；
document.getElementById（'custom'）.style.display='none'；
};
函数showMan（）{
var x=document.getElementById（“man”）；
x、 style.display=“无”；
}
函数hideMan（）{
var x=document.getElementById（“man”）；
x、 style.display=“block”；
}
函数showhat（）{
var x=document.getElementById（“什么”）；
x、 style.display=“无”；
}
函数hideWhat（）{
var x=document.getElementById（“什么”）；
x、 style.display=“block”；
}
函数showCustom（）{
var x=document.getElementById（“自定义”）；
x、 style.display=“无”；
}
函数hideCustom（）{
var x=document.getElementById（“自定义”）；
x、 style.display=“block”；
}
函数计算（）{
if（document.getElementById（'check'）.checked）{
希德曼（）；
showCustom（）；
}否则{
showMan（）；
汗腺（）；
}
}
函数kaas（）{
if（document.getElementById（'manual'）。选中）{
showhat（）；
}else if（document.getElementById（'auto'）。选中）{
隐藏什么（）；
}
}
功能计数线（theArea）{
var theLines=theArea.value.replace（（新的RegExp（“.{”+theArea.cols+“}”，“g”），“\n”）.split（“\n”）；
如果（theLines[theLines.length-1]==“”）theLines.length--；
document.getElementById（“count”）.innerHTML=`${theLines.length}帐户`；
}

标题：





账户（每行一个）：





检查我的所有账户（每100个账户花费1美元）


对


人工检查


自动检查


给我们您的帐户来自的网站的url
网飞公司
Spotify
罗布洛克斯
我的世界
三列之一

我刚刚重写了你的代码并清理了它。请尝试代码更干净，写得更容易理解

<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>

标题：





账户（每行一个）：





检查我的所有帐户（每100个帐户花费1美元）

对


手动检查

自动检查

给我们您的帐户来自的网站的url
网飞公司
Spotify
罗布洛克斯
我的世界
三列之一
函数displayTheElement（id，display=false）{
如果（显示）{
document.getElementById（id）.style.display=“block”；
}否则{
document.getElementById（id）.style.display=“无”；
}
}
window.onload=函数（）{
显示元素（“人”，假）；
显示元素（'what'，false）；
显示元素（“自定义”，假）；
计算（）；
};
函数计算（）{
if（document.getElementById（'check'）.checked）{
显示元素（“人”，真实）；
显示元素（“自定义”，假）；
kaas（）；
}否则{
显示元素（“人”，假）；
显示元素（“自定义”，真）；
}
}
函数kaas（）{
if（document.getElementById（'manual'）。选中）{
显示元素（'what'，true）；
}否则{
显示元素（'what'，false）；
}
}
功能计数线（theArea）{
var theLines=theArea.value.replace（（新的RegExp（“.{”+theArea.cols+“}”，“g”），“\n”）.split（“\n”）；
如果（theLines[theLines.length-1]==“”）theLines.length--；
document.getElementById（“count”）.innerHTML=`${theLines.length}帐户`；
}

但是关于你的错误：

当您更改相关输入的值时触发了您的代码> KAAS方法，但在第一次加载时，它已具有值（选中或选中），因此您必须考虑它。李>

您的呼叫处于错误的层次结构中，请查看下面的代码并尝试找出它

---

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

您的

showCustom

和

hideCustom

的显示值似乎是向后的。这是故意的吗？