Home/ Questions/Q 6471303
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T06:12:31+00:00

I’ve got quite a simple set up with html, css, and javascipt. When the

  • 0

I’ve got quite a simple set up with html, css, and javascipt.
When the user clicks on one of the many divs there are, it should either appear or disappear, as well as setting a hidden form field to “1” or “0”.

First, the css:

div.hidden{
    visibility: hidden;
}
div.shown{
    visibility: visible;
}

javascript:

function toggle(id){
    if (document.getElementById("h"+id).value=="0"){
        document.getElementById("h"+id).value="1";
        document.getElementById("i"+id).className='shown';
    }
    else{
        document.getElementById("h"+id).value="0";
        document.getElementById("i"+id).className='hidden';
    }
}

and HTML:

<html>
  <head>
    <script src="foo.js">
    </script>
  </head>
  <body>
   <form action="blah blah" > 
    <div class="hidden" id="i0" onclick="toggle(0);" >
      <!--some image -->
      <input type="hidden" id="h0" name="0" value="0" />
    </div>

    <div class="hidden" id="i1" onclick="toggle(1);" >
      <!--some image -->
      <input type="hidden" id="h1" name="1" value="0" />
    </div>

    <!-- etc -->
   </form>
  </body>
</html>

I know the javascript is properly linked and operational, because when I call the function via chrome’s console, it works perfectly and does what I expect. However, when I click this div, it does not work!

What am I doing wrong?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your divs are hidden initially (class="hidden"), so you won’t see anything when you run the page and won’t be able to click on them. Also you have typos (there is no onlick event, yet :-)):

    onlick="toggle(1);"

    should probably be:

    onclick="toggle(1);"
    • 0