How Do I Display Field When I Click On A Link? (javascript)

December 27, 2023 Post a Comment

how do I create it so that when I click 'report user', a box displays and it shows a list of reasons why to report the user and a submit button. I rarely use javascript...can someo

Solution 1:

The basic approach is to toggle the CSS display with Javascript. This is the break down of the below code:

Attach an event to the links when the page loads. This is what the window.onload part does.
Identify the links and box with document.getElementById
Use an anonymous function to capture the display toggle

Toggle the display with style.display.

<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>Onclick Example</title><scripttype="text/javascript">window.onload = function(){
  var link =  document.getElementById('rulink');
  var box  =   document.getElementById('box');
  var close = document.getElementById('close');  
  link.onclick = function(){
      box.style.display = 'block'
    }  
    close.onclick = function(){
      box.style.display = 'none';
     }
   }
 </script><style>div{  
   display:none;  
   background:#f00;  
   width:100px;  
 }
 </style></head><body><ahref="javascript:void(0)"id="rulink">report user</a><divid="box"><ul><li>abc</li><li>def</li></ul><ahref="javascript:void(0)"id="close">Close</a></div></body>

Solution 2:

Look into onclick events.

Solution 3:

I would look into jquery, it makes javascript much easier. Using jquery you could perform that using one line of code such as:

$('.<link class>').click(function(){$('.<list class>').show()});

Solution 4:

You can do it this way, but it's pretty crude:

<a href="" onclick="document.getElementById('something').style.display='inherit';return false" >###</a>
<input style="display:none"type="text"id="something"  />

That's the "hard way", but understanding how it works is important.

It is worth it to use a JavaScript framework. Jquery is the most popular and it can seriously make doing any UI work WAY easier.

You can shorten that onclick to:

$('#something').show()

Solution 5:

<script>document.getElementById("showHide").onclick = function() {
    var theDiv = document.getElementById("foo");
    if(theDiv.style.display == 'none') {
        theDiv.style.display = 'block';
        this.innerHTML = 'Hide';
    } else {
        theDiv.style.display = 'none';
        this.innerHTML = 'Show';
    }
}
</script><spanid="showHide">Show</span><divid="foo"style="display:none"><formmethod="post"><h3>Here are some reasons</h3>
    Blah: <inputtype="checkbox"/><br />
    Blah: <inputtype="checkbox"/><br />
    Blah: <inputtype="checkbox"/><br /><inputtype="submit"value="submit" /></form></div>

Try it here: http://jsfiddle.net/8TNmn/2/ and see Click to show more - maybe JS?

JavaScript Free