javascript - show content not defined -
i'm trying implement show more & show less. when executing code , error "show content not defined" can't pick up. missing?
<script type="text/javascript" language="javascript"> function hidecontent(hide) { document.getelementbyid("hide").style.display = "none"; } function showcontent(show) { document.getelementbyid("hide").style.display = "list-item"; } function reversedisplay(hide) { if (document.getelementbyid("hide").style.display == "none") { document.getelementbyid(d).style.display = "block"; } else { document.getelementbyid(d).style.display = "none"; } } </script> heading<br/> <a href="javascript:showcontent(show)" > show </a> <div id="hide" style="display:none;"> <p>content goes here</p> <a href="javascript:hidecontent(hide)"> hide </a> </div>
you should not use inline javascript because code scales, becomes less , less maintainable. instead should use dom api methods select element , use .addeventlistener method assign event listener function.
however, reason getting error because using variables in javascript have not been defined. causes error , stops script, means showcontent , hidecontent won't initialized , therefore when try use functions won't exist, throwing error.
var hidd = document.getelementbyid("hidden"); var hide = document.getelementbyid("hide"); var show = document.getelementbyid("show"); show.addeventlistener('click', function(){ hidd.style.display = ''; show.style.display = 'none'; }, false); hide.addeventlistener('click', function(){ hidd.style.display = 'none'; show.style.display = ''; }, false); <a id="show" href="#">show</a> <div id="hidden" style="display:none;"> <a id="hide" href="#">hide</a> <p>content goes here</p> </div>
Comments
Post a Comment