Question

This is my code in which I have set the div visibility by default hidden

<div id="addComments" align="center" style="width:300px; height:300px; visibility:hidden">
    <button>Submit</button>
    <button>Cancel</button>
</div>

but when I click on this link I want to change the visibility of a div to visible.

<a href="javascript:addMethod()">+ Create a new comment</a>

the method behind this link is as follows:

function addMethod() {
    try {

        var obj = document.getElementById('addComments');
        obj.visibility = "visible";
        var mashupId = _settings.ratedObjectId;
        var tenantId = _settings.tenantId;
        var comments = null;
        var user = { "Id": 2007, "FirstName": "Ufone", "LastName": "", "EmailAddress": "[e-mail]509" };
        var ratingInfo = {
            "Id": 0,
            "TenantId": tenantId,
            "UserId": user.Id,
            "FirstName": user.FirstName,
            "LastName": user.LastName,
            "Rating": 0,
            "EmailAddress": user.EmailAddress,
            "Comments": comments,
            "RatedObjectTypeInfo": { "Id": 2 },
            "RatingTypeInfo": { "Id": 1 },
            "MashupRatingInfo": { "MashupMetaInfoId": mashupId },
            "RatedObjectId": mashupId,
            "TotalCount": 0
        };

        var url = "http://services.farooq.tv/RatingInfoManagementService/RatingInfoManagementService.svc/ajax/AddRating";

        $.ajax({
            type: "POST",
            url: url,
            data: JSON.stringify(ratingInfo),
            contentType: "application/json",
            timeout: 5000,
            success: function (d) {
                console.log(d);
                if (d == true) {

                    alert("Thank you");
                }
                else {

                    alert("Rewrite");
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log(xhr);
            }



        });

    }
    catch (err) {

        alert(err);}

}

Please help; I’m new to programming.

Answer 1

I would suggest that you use one of the Javascript frameworks available .. for example jQuery makes life much easier .. you can use the selectos provided there to simply pick whatever element you want .. afterwards you can handle CSS changes easily

for example:

$(selector).css("attribue","value");
or $(selector).show(); //or hide()