I have some JSON data displayed on my HTML page. I want the border color of #row to change depending on the data. I have written this but it doesn't seem to be working. There's no error message but the border doesn't show up. How can I fix it?

 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";

    }
    document.getElementById("#row").style.borderBottom = "3px solid colour"
}

CodePudding user response：

in the bottom line, you have two mistakes

1. you wrote document.getElementById("#row"), its not supposed to have a #
2. you just had the string "3px solid colour" with no relation to the colour variable

document.getElementById("row").style.borderBottom = "3px solid" = colour

or

document.getElementById("row").style.borderBottom = `3px solid ${colour}`

CodePudding user response：

document.getElementById("#row").style.borderBottom = "3px solid " colour