JavaScript条件语句无法触发SlideUp效果问题求助

核心问题：条件判断错误 #

你的代码里最关键的问题是条件语句误用了赋值运算符=而非比较运算符：

if (InviteType = "paperInvite") { ... }

这里的=是把字符串"paperInvite"赋值给InviteType，这个表达式的结果永远为真，所以不管你选哪个单选按钮，都会执行if分支的代码，永远不会走到else分支。必须改成严格相等的===：

if (InviteType === "paperInvite") { ... }

其他需要修正的问题 #

1. 不存在的DOM元素引用：代码中$("#ModCreGuest")对应的元素在HTML里不存在，直接删除这行代码即可。
2. 重复绑定事件：每次点击submitInvite按钮都会给paperSubmit绑定一次click事件，多次点击后会触发多次回调。应该把按钮事件绑定移到页面加载完成的回调外层，避免重复绑定。
3. 表单默认提交行为：表单内的按钮点击会触发表单提交，导致页面刷新，需要在按钮点击事件中调用event.preventDefault()阻止默认行为。
4. 重复的ID属性：HTML里两个表单都有id="guestPhone"，ID必须唯一，建议修改为paperGuestPhone和elecGuestPhone。

修正后的代码 #

HTML代码

<!DOCTYPE html>
<html>
    <head>
        <!--This is jQuery via Google CDN-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <!--Script to JavaScript-->
        <script src="select.js"></script>
    </head>
    <body>
         <!--This divide is for the creating/modifying a guestlist-->
            <div id="inviteType">
                <p>What Type of Invitations Will You be Sending?</p>
                <input type="radio" value="paperInvite" name="InviteType" id="paperInvite">
                <label for="paperInvite">Paper + Electronic Invitations</label>
                <br>
                <input type="radio" value="elecInvite" name="InviteType" id="elecInvite">
                <label for="elecInvite">Electronic Invitations</label>
                <br>
                <button id="submitInvite">Submit</button>

            </div>
        <div id="paper">
                <form id="paperGuest">
                    <input type="text" placeholder="First Name" required>
                    <input type="text" placeholder="Last Name" required>
                    <label for="paperGuestPhone">Guest Phonenumber</label>
                    <input type="tel" placeholder="+0(123)345-6789" id="paperGuestPhone">
                    <!--This section of code is for the address lines-->
                    <label for="guestAddress">Please Enter Guest Address</label>
                    <textarea id="guestAddress"  required></textarea>
                    <div id="guestAddPopUp">
                        You can either copy and paste from your contacts, or you may enter the address within this format. <br>
                        1234 S. Buttermore Ave. Apt. 16 <br>
                        Plainsville, AL 70832 &#10 <br>
                        (Country, if applicable)
                    </div>
                    <label for="additionalGuest">Additional Guests</label>
                    <select class="additionalGuest" name="additionalGuests">
                        <option value="none">None</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                    </select>
                    <button id="paperSubmit">Submit</button>
                </form>
        </div>
        <div id="electronic">
            <form id="elecGuest">
                <input type="text" placeholder="First Name" required>
                <input type="text" placeholder="Last Name" required>
                <label for="elecGuestPhone">Guest Phonenumber</label>
                <input type="tel" placeholder="+0(123)345-6789" id="elecGuestPhone">
                <label for="guestEmail">Guest Email</label>
                <input type="email" placeholder="person123@mail.com">
                <label for="additionalGuest">Additional Guests</label>
                 <select class="additionalGuest" name="additionalGuests">
                    <option value="none">None</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
                <button id="elecSubmit">Submit</button>
            </form>
        </div>
    </body>
</html>

JavaScript代码

window.addEventListener("load", (event) => {
    $("#paper").hide();
    $("#electronic").hide();

    // 提前绑定表单提交按钮事件，避免重复绑定
    $("#paperSubmit").on("click", function(e) {
        e.preventDefault(); // 阻止表单默认提交刷新页面
        // 这里添加纸质邀请表单的提交逻辑
    });

    $("#elecSubmit").on("click", function(e) {
        e.preventDefault(); // 阻止表单默认提交刷新页面
        // 这里添加电子邀请表单的提交逻辑
    });

    $("#submitInvite").on("click", function() { 
        let InviteType = $('input[name="InviteType"]:checked').val();
        if (!InviteType) {
            // 处理未选择邀请类型的情况
            alert("请选择邀请类型");
            return;
        }
        document.body.style.color = "#214010";
        document.body.style.backgroundColor = "#CAE6AC";
        
        // 先隐藏两个表单，再显示选中的目标表单
        $("#paper, #electronic").slideUp(2700);
        if (InviteType === "paperInvite") {
            $("#paper").slideDown(3300);  
        } else {
            $("#electronic").slideDown(3300);
        }
    });
});

内容的提问来源于stack exchange，提问作者mmv773