含switch case的星座判断函数无输出问题排查求助

你的星座判断函数没有输出，主要是因为变量未定义、逻辑结构错误、表单默认提交行为未阻止、DOM选择错误这几个核心问题，我来逐一拆解并给出修复后的完整代码：

核心错误分析 #

• Switch语句完全无效：你写了switch (signDate)但只定义了case 0，而signDate是输入的日期字符串（比如2024-04-15），永远不会匹配case 0，导致代码块里的逻辑根本不会执行。
• 未定义变量满天飞：代码里的d1、d2、c这些变量都没声明就直接使用，浏览器会直接抛出错误，中断函数执行。
• 表单默认提交行为未阻止：点击按钮时，默认会提交表单并刷新页面，函数刚执行就被页面刷新打断，根本来不及输出结果。
• DOM选择错误：你用$("#output")选中的是<label>标签，但你要赋值的是后面的<input type="text" name="output">，选择器完全不对。
• 日期逻辑不完整：只写了白羊座的判断框架，但没有完整的星座日期区间，也没有正确处理输入日期的解析逻辑。

修复后的完整代码 #

HTML部分（修正小细节） #

<head>
    <meta charset="utf-8" />
    <title>your sign</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div>
        <form id="yourSign">
            <label for="birthDate">birthdate</label><br />
            <input type="date" name="birthDate" id="birthDate" /><br />
            <button onclick="yourSign(event)" id="sendSign" name="sendSign">send</button><br>
            <label for="output">your sign is: </label><br>
            <input type="text" name="output" id="output"> <!-- 给输入框加id，方便准确选择 -->
        </form>
    </div>
</body>

JavaScript函数（完全重构逻辑） #

function yourSign(event) {
    // 阻止表单默认提交行为，避免页面刷新
    event.preventDefault();

    // 获取输入的日期值（type="date"的input返回格式是YYYY-MM-DD）
    var signDateStr = $("input[name='birthDate']").val();
    if (!signDateStr) {
        alert("请选择出生日期");
        return;
    }

    // 解析日期为月和日（忽略年份，符合需求）
    var dateParts = signDateStr.split("-");
    var month = parseInt(dateParts[1], 10);
    var day = parseInt(dateParts[2], 10);

    // 定义所有星座的日期区间（月，起始日，结束日，星座名称）
    const zodiacSigns = [
        { month: 3, start: 21, end: 31, name: "Aries" },
        { month: 4, start: 1, end: 20, name: "Aries" },
        { month: 4, start: 21, end: 30, name: "Taurus" },
        { month: 5, start: 1, end: 21, name: "Taurus" },
        { month: 5, start: 22, end: 31, name: "Gemini" },
        { month: 6, start: 1, end: 21, name: "Gemini" },
        { month: 6, start: 22, end: 30, name: "Cancer" },
        { month: 7, start: 1, end: 22, name: "Cancer" },
        { month: 7, start: 23, end: 31, name: "Leo" },
        { month: 8, start: 1, end: 22, name: "Leo" },
        { month: 8, start: 23, end: 31, name: "Virgo" },
        { month: 9, start: 1, end: 23, name: "Virgo" },
        { month: 9, start: 24, end: 30, name: "Libra" },
        { month: 10, start: 1, end: 23, name: "Libra" },
        { month: 10, start: 24, end: 31, name: "Scorpio" },
        { month: 11, start: 1, end: 22, name: "Scorpio" },
        { month: 11, start: 23, end: 30, name: "Sagittarius" },
        { month: 12, start: 1, end: 21, name: "Sagittarius" },
        { month: 12, start: 22, end: 31, name: "Capricorn" },
        { month: 1, start: 1, end: 20, name: "Capricorn" },
        { month: 1, start: 21, end: 31, name: "Aquarius" },
        { month: 2, start: 1, end: 18, name: "Aquarius" },
        { month: 2, start: 19, end: 29, name: "Pisces" },
        { month: 3, start: 1, end: 20, name: "Pisces" }
    ];

    // 匹配对应的星座
    var matchedSign = zodiacSigns.find(sign => 
        sign.month === month && day >= sign.start && day <= sign.end
    );

    // 输出结果到输入框
    if (matchedSign) {
        $("#output").val(matchedSign.name);
    } else {
        $("#output").val("无效日期");
    }
}

关键修复点说明 #

1. 阻止表单提交：给onclick传event参数，调用event.preventDefault()避免页面刷新，保证函数能完整执行。
2. 正确解析日期：处理type="date"输入的YYYY-MM-DD格式，提取月和日（完全忽略年份，符合你的需求）。
3. 完整星座区间：定义了所有星座的月日区间，覆盖所有合法日期。
4. 准确DOM选择：给输出输入框加了id="output"，直接用$("#output")赋值更准确。
5. 错误处理：增加了空输入的判断，避免无输入时出现错误。

现在测试一下，比如选择2024-04-15，会正确返回Aries，所有星座都能正常判断啦！

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