javascript - 如果父元素可见，则显示子元素

Question

如果父元素可见，我试图让我的表单显示子元素，并且我的子元素不断收到“未定义”错误，即使我已经定义了它。我正在尝试将其设置在以下位置：

Q1：选中的响应将显示父元素（div）。Q2：根据这个响应，它会显示子元素（div）。

有没有办法做到这一点？

    //Next Tab

    function next() {
            var formTabOne = document.getElementById("stepOne");
            formTabOne.classList.add("formTrans");
            formTabOne.addEventListener("transitionend", function({
                target
                }) {
                if (target === formTabOne) {
                    target.classList.add("hidden");
                    target.classList.remove("formTrans");
                    document.getElementById("stepTwo").classList.remove("hidden");
                }
            })
        }
    
        //Prev Tab
        
        function prev() {
            var formTabTwo = document.getElementById("stepTwo");
            formTabTwo.classList.add("formTrans");
            formTabTwo.addEventListener("transitionend", function({
                target
            }) {
                if (target === formTabTwo) {
                    target.classList.add("hidden");
                    target.classList.remove("formTrans");
                    document.getElementById("stepOne").classList.remove("hidden");
                }
            })
        }

function process() {
        var form = document.myForm;
        var biz = document.getElementById("biz");
        var career = document.getElementById("career");
        var change = document.getElementById("change");
        var eq = document.getElementById("eq");
        var empathy = document.getElementById("empathy");
        var pm = document.getElementById("pm");
        var bizMgr = document.getElementsByClassName("bizMgr");
        var bizEE = document.getElementsByClassName("bizEE");

            //Q1 - Topics

                document.querySelectorAll("#chkTopic input").forEach((el) => {
                    const contentID = el.id.replace("chk", "").toLowerCase()
                    document.getElementById(contentID).style.display = el.checked ? "block" : "none";
                });
    
            //Q2 - Employee Type
    
                var q2value = "";
                for (var i = 0; i < form.q2.length; i++) {
                var answer = form.q2[i];
                if (answer.checked) {
                    q2value = answer.value;
                    }
                }
    
                if (q2value == "1") {
                    if (biz.style.display = "block") {
                        bizMgr.style.display = "block";
                        bizEE.style.display = "block";
                    }
                } else {
                    if (biz.style.display = "block") {
                        document.getElementsByClassName("bizEE").style.display = "block";
                    }
                }
        }

    html {
            scroll-behavior: smooth;
        }
        
        #formWrapper {
            background-color: #eaeaea;
            padding: 20px;
            margin-bottom: 40px;
            min-height: 300px;
        }
        
        #myForm {
            width: 70%;
            min-height: 280px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border: 1px solid #dedede;
            box-sizing: border-box;
        }
        
        .formStep {
            opacity: 1;
            background: #fff;
        }
        
        .formTrans {
            visibility: hidden;
            opacity: 0;
            transition: visibility 0s 200ms, opacity 200ms linear;
        }
        
        .hidden {
            display: none;
        }

        #biz, #career, #change, #eq, #empathy, #pm, #pd {
            display: none;
            width: 100%;
            min-height: 200px;
            box-sizing: border-box;
            margin-bottom: 30px;
            border: 1px solid #000;
        }
    
        .bizMgr, .bizEE, .careerMgr, .careerEE, .changeMgr, .changeEE, .eqMgr, .eqEE, .empathyMgr, .empathyEE, .pmMgr, .pmEE, .pdMgr, .pdEE {
            display: none;
        }

<form name="myForm" id="myForm">

        <input type="button" value="Skip This" onclick="formSkip();">

        <br><br>

        <!--Step 1-->

        <div id="stepOne" class="formStep">

            <b>Select the topic(s) you're interested in:</b><br>
            <div id="chkTopic">
                <input id="chkBiz" type="checkbox" value="1"><label for="chkBiz">Business Structure/Acumen</label><br>
                <input id="chkCareer" type="checkbox" value="2"><label for="chkCareer">Career Development</label><br>
                <input id="chkChange" type="checkbox" value="3"><label for="chkChange">Change</label><br>
                <input id="chkEQ" type="checkbox" value="4"><label for="chkEQ">Emotional Intelligence</label><br>
                <input id="chkEmpathy" type="checkbox" value="5"><label for="chkEmpathy">Empathy</label><br>
                <input id="chkPM" type="checkbox" value="6"><label for="chkPM">Performance Management</label><br>
            </div>
            <br>
            <button type="button" id="btnStepOne" onclick="next();">Next</button>

        </div>

        <!--Step 2-->

        <div id="stepTwo" class="formStep hidden">

            <b>Are you a people leader?</b><br>
            <input type="radio" name="q2" value="0">No<br>
            <input type="radio" name="q2" value="1">Yes<br>

            <br>
            <button type="button" id="btnStepTwo" onclick="prev();">Previous</button>
            <input type="button" value="Show Results" onclick="process();">
            <input type="reset" value="Start Over" onclick="formReset();">

        </div>
    </form>

<div id="results">
<div id="biz">
    Business Structure/Acumen
    <div class="bizMgr">Manager Content</div>
    <div class="bizEE">Employee Content</div>
</div>
<div id="career">
    Career Development
    <div class="careerMgr">Manager Content</div>
    <div class="careerEE">Employee Content</div>
</div>
<div id="change">
    Change
    <div class="changeMgr">Manager Content</div>
    <div class="changeEE">Employee Content</div>
</div>
<div id="eq">
    Emotional Intelligence
    <div class="eqMgr">Manager Content</div>
    <div class="eqEE">Employee Content</div>
</div>
<div id="empathy">
    Empathy
    <div class="empathyMgr">Manager Content</div>
    <div class="empathyEE">Employee Content</div>
</div>
<div id="pm">
    Performance Management
    <div class="pmMgr">Manager Content</div>
    <div class="pmEE">Employee Content</div>
</div>
</div>

标签： javascript

Answer 1

.getElementsByClassName返回一个集合，bizMgr并且bizEE都是collections. 您必须迭代collections并将每个设置element为style.display = 'block'. 你不能只调用xxx.style.display一个javascript集合。您可能希望更改您的代码，如下所示：

            if (q2value == "1") {
                if (biz.style.display = "block") {
                    //bizMgr.style.display = "block"; -NO
                    //bizEE.style.display = "block"; -NO
                    for(let i = 0; i < bizMgr.length; i++){
                       bizMgr[i].style.display = "block";
                    }

                    for(let j = 0; j < bizEE.length; j++){
                       bizEE[j].style.display = "block";
                    }
                }
            } else {
                if (biz.style.display = "block") {
                    //document.getElementsByClassName("bizEE").style.display = "block"; -NO
                    for(let j = 0; j < bizEE.length; j++){
                       bizEE[j].style.display = "block";
                    }
                }
            }