使用JavaScript生成HTML时，负数样式类绑定失效的原因排查

核心问题 #

你代码里的判断逻辑写错了：
当前判断条件是${item.numberInputValue === '-' ? 'expence-history' : ''}，但用户输入的负数是类似-100、-50这种带数字的字符串，不是单独的-符号，所以这个条件永远不会成立，自然无法给目标元素加上样式类。

解决方式 #

把判断条件改成以下两种方式之一即可：

方式1：转成数字判断是否小于0（推荐，更严谨）

将原代码中的条件替换为：

<div class="history-content ${Number(item.numberInputValue) < 0 ? 'expence-history' : ''}">

这种方式会把输入的字符串转成数字，只要是负数就会触发样式类，同时能排除类似-abc这种无效输入的情况（如果需要严格判断，可以再加!isNaN(Number(item.numberInputValue))）。

方式2：检查字符串是否以负号开头

如果不需要转数字，直接检查字符串开头是否为-：

<div class="history-content ${item.numberInputValue.startsWith('-') ? 'expence-history' : ''}">

这种方式简单直接，但要注意如果用户输入单独的-也会触发类，可能需要在添加历史的时候做输入验证，避免空的无效输入。

补充建议 #

可以在addHistory函数里加个简单的输入验证，确保存入的数据有效：

function addHistory() {
    const textInput = document.querySelector('.text-input');
    const textInputValue = textInput.value.trim();

    const numberInput = document.querySelector('.number-input');
    const numberInputValue = numberInput.value.trim();

    // 简单验证：文本不为空，数字输入是有效数值
    if (!textInputValue || isNaN(Number(numberInputValue))) {
        alert('请输入有效的内容');
        return;
    }

    const historyItem = {textInputValue, numberInputValue};
    historyHtml.push(historyItem);

    textInput.value = '';
    numberInput.value = '';
    createHistory();
}

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