如何检查字符串末尾是否为元音及修复[object HTMLInputElement]代码错误

原代码问题分析 #

• 直接使用input1导致[object HTMLInputElement]错误：input1是DOM元素的ID，不是输入框的文本值，应该使用获取到的输入变量。
• 无限循环do-while(true)：无意义的死循环会导致页面卡死，完全不需要保留。
• 后缀不符合需求：原代码添加的是"pa"，但需求要求添加"ce"。
• 元音判断代码冗余：重复的endsWith语句可以通过统一格式简化。

修复后的完整代码 #

HTML部分（无需修改） #

@{
    ViewBag.Title = "Taxi";
}
<html>
<body>
    <br />
    <br />
    <br />
    <br />
    <br />
    Enter a word:
    <input id="input1">
    <br />
    <br />
    <input type="submit" value="SUBMIT" id="submit"><br /><br />

    <p id="dsplyresult1"></p>
</body>
</html>
<script src="~/Scripts/JQUERY/jquery-3.6.3.min.js"></script>
<script src="~/Scripts/MyScript/Tax.js"></script>

JavaScript部分（修复后） #

$(document).ready(function () {
    $("#submit").click(function () {
        const inputValue = $("#input1").val().trim();
        const vowels = ['a', 'e', 'i', 'o', 'u'];
        let result = inputValue;

        if (inputValue) {
            const lastChar = inputValue.toLowerCase().slice(-1);
            if (vowels.includes(lastChar)) {
                result = inputValue + "ce";
            }
        }

        $("#dsplyresult1").text(result);
    });
});

关键改动说明 #

1. 修正变量引用：用inputValue代替input1，确保使用输入框的文本值而非DOM元素本身，解决[object HTMLInputElement]错误。
2. 移除死循环：删除无意义的do-while(true)，直接根据逻辑生成结果并更新页面。
3. 调整后缀内容：将错误的"pa"改为需求要求的"ce"。
4. 优化元音判断：
   • 将最后一个字符统一转为小写，减少重复的大小写判断语句。
   • 使用数组includes方法简化条件判断，代码更简洁易维护。
5. 增加空输入处理：先判断输入是否为空，避免空字符串导致的逻辑异常。

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