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

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

• javascript
• html
• css

• 1 Try putting the <li> tag inside a <ul> element. – Scorpion-Prince Commented May 8, 2012 at 15:56
• what do you expect to happen? – Musa Commented May 8, 2012 at 16:01
• 2 Please validate your HTML before ing to StackOverflow. There are several tools for that. With the corrected HTML, your code works great, see this demo. – kapa Commented May 8, 2012 at 16:11
• 1 Valid HTML is very important for cross browser patibility. Always validate your HTML. – Sparky Commented May 8, 2012 at 16:29
• 1 There is nothing wrong on not being good in html. You said you wrote the question quickly, that's the problem. Try to post a Short, Self Contained, and Correct Example that reproduces the problem. Put more effort into writing your questions, and you might even find the solution yourself in the process. You have many valid answers here and none seem to solve the problem, so the problem might be somewhere else. A typo somewhere on your code, likely an ID. Who knows? – bfavaretto Commented May 8, 2012 at 16:43

5 Answers 5

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>

just be sure to define the function before, like in this fiddle: http://jsfiddle/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)

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/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./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/SvufY/1/

Try putting the <li> inside of a <ol> or <ul> tag.

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/xxgdB/

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