javascript doesn't work with LI tag

Question

hi i have this code

html code

<ul>
<input type="button" onclick="appear()"/>
<li id="addQuestionChoices">roma</li>
</ul>

css code

#addQuestionChoices{display:none;}

javascript code

function appear()
{document.getElementById('addQuestionChoices').style.display="block";}

but when i press the button , nothing happend, is javascript doesn't work with LI tag ? or what ? thank you for answering

Answer 1

The <li> tag must be inside an <ul> or <ol> , and the only allowed children for <ul> and <ol> are <li> tags. This means your <input> should be outside the <ul> :

<input type="button" onclick="appear()"/>
<ul>
    <li id="addQuestionChoices">roma</li>
</ul>

Answer 2

just be sure to define the function before , like in this fiddle: http://jsfiddle.net/2dUfa/

<script>
function appear() {
    document.getElementById('addQuestionChoices').style.display= "block";
}
</script>
<input type="button" onclick="appear()" value="appear" />

<ul>
   <li id="addQuestionChoices">roma</li>
</ul>

As a sidenote: the default display property of a <li> element is list-item (and not block )

Answer 3

尝试将<li>放在<ol>或<ul>标记内。

Answer 4

It's bad practice to embed JavaScript calls within HTML. It makes the code much more maintainable when the functionality, style and markup are kept seperate. Secondly your <li> element should be nested within either a pair of <ul> or <ol> tags.

I have written a jsFiddle example of how you could tackle this task:

http://jsfiddle.net/dLqja/1/

In this code I have created a 'click' listener, this is attached to your button via its id. Upon the button press it triggers an anonymous callback function which dynamically changes the display style of your 'li' element.

Inclusion of jQuery

Make the following is the first JavaScript that you include in your page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

This jQuery script is hosted by Google, which has its advantages such as (it's probably already cached in the clients browser from visiting a previous website using it).

Any JavaScript code which you write which uses the functionality of jQuery should be included after the above script.

None jQuery Version...

You can achieve a similar result as the above by assigning an event listener to the button. This approach is preferable to using onclick="..." as sticks to the rule of seperating functionality from markup. If none of these answers work you should check your browsers console for error messages. http://jsfiddle.net/SvufY/1/

Answer 5

You should avoid using inline Javascript code, and instead focus on keeping it separated. Attach your event handler to the object in a script tag (or, better yet, a script file loaded at the end of the document), something like this:

<input id="clickButton" type="button" value="submit" />
    <ul>
        <li id="addQuestionChoices">roma</li>
    </ul>

<script>
    document.getElementById('clickButton').onclick = function() {
        document.getElementById('addQuestionChoices').style.display="block"
    };
</script>

You can see a working example of this at http://jsfiddle.net/xxgdB/

Note also you can use either list-item or inherit in the display field to achieve the same effect.