客户端JavaScript如何基于回文判断结果修改对应文本颜色

首先你的代码存在几个明显错误，修复后即可满足需求：

原有代码问题清单 #

• isPalindrome 传参错误：你传入的是textarea DOM对象，不是输入的文本内容，导致判断逻辑完全失效
• 颜色设置对象错误：需求是修改新增列表项的文本颜色，你错误修改了textarea输入框的颜色，且表单重置后该样式会被清除
• 变量未定义报错：你获取的表单变量名为staticForm，后续调用reset方法时用了不存在的myForm，会抛出JS错误阻断代码执行
• 输入内容未做预处理：textarea默认自带前后换行和空格，直接判断会导致回文结果不准确
• 存在无意义冗余代码：submit事件末尾声明的result变量没有被使用，无实际作用

修复后完整代码 #

JS代码 #

function isPalindrome(text) {
    // 可选优化：忽略大小写、去除所有空白字符，可根据需求调整
    const cleanText = text.trim().toLowerCase();
    return cleanText === cleanText.split('').reverse().join('');
}

const staticForm = document.getElementById('static-form');
const myUl = document.getElementById('list');
const textarea = document.getElementById('text');

staticForm.addEventListener('submit', (event) => {
    event.preventDefault();
    const inputContent = textarea.value.trim();
    // 空内容直接跳过
    if (!inputContent) {
        textarea.focus();
        return;
    }
    const li = document.createElement('li');
    li.textContent = inputContent;
    // 给新增的列表项设置对应颜色
    li.style.color = isPalindrome(inputContent) ? 'red' : 'blue';
    myUl.appendChild(li);
    // 用正确的表单变量重置
    staticForm.reset();
    textarea.focus();
});

HTML代码无需修改，保持你原有结构即可 #

<main>
        <form id='static-form' method="POST" class="new-post-form">
            <textarea id='text' name='phrase'>
                Attempt here
            </textarea>
        
            <input class="sub-button" type="submit" name="submit" value="Submit" /> 
        </form>
        <ul id='list'></ul>
        
</main>

核心修改说明 #

• 回文判断前先对输入内容做trim()去除前后空白，可选添加大小写统一处理，提升判断准确率
• 把颜色设置绑定到新增的li元素上，符合你要修改列表项文本颜色的需求
• 修正了变量名错误，避免JS运行报错
• 增加空内容判断，避免添加无意义的空列表项

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