如何根据分值动态修改id为error的div元素的文本显示颜色

直接在现有showScore函数中添加颜色判断逻辑即可，无需单独编写新函数，该函数每次更新分数时都会触发，可同步修改对应元素的文本颜色。

修改后的完整代码 #

function showScore () {
    if (!numNotes) return;
    const perr = errorCount * opt.pnlerr, ptim = lateNotes * opt.pnltim;
    var score = 100 * (goodNotes - perr - (opt.tmng ? ptim : 0)) / numNotes;
    if (score < 0) score = 0;
    var x = score.toFixed (0) + '%';
    if (opt.scal)
        x = goodNotes +'-'+ perr + (opt.tmng ? '-'+ ptim : '') +'='+ x +' of '+ numNotes;
    // 新增：根据分数区间设置文本颜色
    if (score <= 49) {
        $error.style.color = 'red';
    } else if (score >= 50 && score < 85) {
        $error.style.color = 'blue';
    } else {
        // 分数>=85的情况
        $error.style.color = 'green';
    }
    $error.innerHTML = x;
}

如果需要自定义颜色深浅，可以把颜色名称替换为十六进制颜色码，例如#dc3545（红色）、#0d6efd（蓝色）、#198754（绿色）。

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