Question

I’m very new to JQuery, in fact this is the first script I’ve ever written. The following simply finds all DIVs with class “TestDIV”, and then performs a few operations upon inputs found within them.

Everything works apart from the borderColor, which remains the colour I originally set it. Does anybody have any ideas as to why this is? I’d also be very welcome to tips on how to improve my code.

function hideAndShowJQ(show) {
        var hideColor = "#DFDFDF";
        //Find DIVs and modify styling
        var div = $('div.TestDIV'); //Find relevant divs
        div.css('color', (show) ? "" : hideColor) //Change text colour
            .find(':input').attr("disabled", !show) //Disable any inputs
            .attr("borderColor", "red") //Change border colour of inputs
            .attr("value", ""); //Clear any existing input text
}

Answer 1

The problem is that borderColor is not an attribute of the element, it’s a CSS property.

To change css properties/values use css(). Also, when using quotes it’s "border-color" not borderColor (though as @Felix Kling notes, in the comments below, it doesn’t matter about the camelCase being in quotes):

div.css('color', (show) ? "" : hideColor) //Change text colour
            .find(':input').attr("disabled", !show) //Disable any inputs
            .css("border-color", "red") //Change border colour of inputs
            .attr("value", ""); //Clear any existing input text

Given that you’re using jQuery, and have an input element that you want to clear, it might be easier to use val(), rather than attr():

.val(''); // sets the value of the input to an empty string.