Changing the style display from none to block in javascript?

Question

Here is html code snippet

<li style="opacity: 1;">
    <a id="LinkDisplay" class="optionsDropDown" style="color:#FF0000;display:none" href="javascript:showThisLink('LinkId');">
</li>

Here is jquery function which is being called at on load

$(function () {
    $.ajax({
        url: url,
        dataType: 'json',
        data: '',
        type: 'POST',
        success: function (data) {
            alert("Test");
            document.getElementById("LinkDisplay").style.diplay="block"; // line 1
            // after this line execution i should see the link as i have
            // changed the link display from none to block but it is still invisible
        });
    });
}

After line 1 execution , I am not sure why my link is not becoming visible?

Neji · Accepted Answer · 2012-08-29 09:30:22Z

23

you have not changed the display property in your code

 document.getElementById("LinkDisplay").style.display="block"

insert this code into your function after line1

edited Aug 29, 2012 at 9:30

answered Aug 29, 2012 at 8:56

Neji

6,8875 gold badges45 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

M Sach Over a year ago

It is already block. It was typo mistake. Updated the original post

Henrik Karlsson · Accepted Answer · 2012-08-29 12:20:04Z

9

Since you are using jQuery you could just write

$("#elemId").show()

edited Aug 29, 2012 at 12:20

answered Aug 29, 2012 at 9:00

Henrik Karlsson

5,7634 gold badges28 silver badges43 bronze badges

Comments

dreamweiver · Accepted Answer · 2017-07-31 06:16:22Z

6

The problem is the spelling of display in the line:

document.getElementById("LinkDisplay").style.display="block";

edited Jul 31, 2017 at 6:16

dreamweiver

5,9922 gold badges27 silver badges39 bronze badges

answered Jul 2, 2014 at 11:41

Prasad DLV

4284 silver badges9 bronze badges

1 Comment

PG1 Over a year ago

This is a typo but original prroblem is something else.

whostolemyhat · Accepted Answer · 2012-08-29 09:11:09Z

2

The parent li is set to opacity: 0, which makes it transparent.

You'll need to update its' opacity to 1 to make it visible.

Replace this:

document.getElementById("LinkDisplay").style.color = "#FF0000";

with this:

$('#LinkDisplay').show().parent('li').css({opacity: 1});

The second line is jQuery (since you're using jQuery already and it's easier to find the parent node) - it's finding the LinkDisplay link and changing the display: none to display: block, then alters the parent li's opacity to make it visible.

Working jsFiddle

edited Aug 29, 2012 at 9:11

answered Aug 29, 2012 at 8:57

whostolemyhat

3,1194 gold badges36 silver badges50 bronze badges

Comments

dan · Accepted Answer · 2012-08-29 09:00:09Z

1

Using jQuery:

$('#LinkDisplay').css('display','block');
$('#LinkDisplay').parent().css('opacity','1');

answered Aug 29, 2012 at 9:00

dan

2,38818 silver badges17 bronze badges

Comments

Brombomb · Accepted Answer · 2012-08-29 09:06:18Z

1

It also looks like you're already using jquery so you can simplify a bit by using the $ selector syntax:

$('#LinkDisplay').css('display', 'block')

You could also use the jQuery show method to shorten the first part like so:

$('#LinkDisplay').show()

The jQuery selector can find elements by ID or classes using the # for id's and . for classes. The jQuery css method allows you to both get and set properties using a variety of methods. And the jQuery parent method quickly allows you to traverse upwards from an element in the DOM to find other tags.

edited Aug 29, 2012 at 9:06

answered Aug 29, 2012 at 9:00

Brombomb

7,0864 gold badges40 silver badges57 bronze badges

Collectives™ on Stack Overflow

Changing the style display from none to block in javascript?

6 Answers 6

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related