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

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/