如何修复JavaScript修改HTML元素#row边框颜色无效的问题

你的代码存在两个关键问题，导致边框无法正常显示：

1. 元素选择错误：document.getElementById()的参数不需要带#，该方法直接接收元素的id属性值，正确写法是document.getElementById("row")。
2. 变量引用错误：设置边框样式时，你把变量colour直接写在了字符串里，浏览器会将其识别为普通文本而非变量值，需要用模板字符串或字符串拼接来插入变量。

修复后的完整代码 #

function displaylineColour(birds){
    let colour ="";
    if(birds == "Not Threatened"){
        colour= "#02a028";
    }else if(birds == "Naturally Uncommon"){
        colour="#649a31";
    }else if(birds == "Relicit"){
        colour="#99cb68"; 
    }else if(birds == "Recovering"){
        colour="#fecc33";
    }else if(birds == "Declining"){
        colour="#fe9a01";
    }else if(birds == "Nationally Increasing"){
        colour="#c26967";
    }else if(birds == "Nationally Vulnerable"){
        colour="#9b0000";
    }else if(birds == "Nationally Endangered"){
        colour="#660032";
    }else if(birds == "Nationally Critical"){
        colour="#320033";
    }else if(birds == "Extinct"){
        colour="#000";
    }else if(birds == "Data Deficient"){
        colour="#000";
    }
    // 修复两处错误：去掉id的#，用模板字符串插入colour变量
    document.getElementById("row").style.borderBottom = `3px solid ${colour}`;
}

可选优化方案（简化条件判断） #

用对象映射替代冗长的if-else，代码更简洁易维护：

function displaylineColour(birds){
    const colourMap = {
        "Not Threatened": "#02a028",
        "Naturally Uncommon": "#649a31",
        "Relicit": "#99cb68",
        "Recovering": "#fecc33",
        "Declining": "#fe9a01",
        "Nationally Increasing": "#c26967",
        "Nationally Vulnerable": "#9b0000",
        "Nationally Endangered": "#660032",
        "Nationally Critical": "#320033",
        "Extinct": "#000",
        "Data Deficient": "#000"
    };
    const colour = colourMap[birds] || "";
    document.getElementById("row").style.borderBottom = `3px solid ${colour}`;
}

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