Question

我用html，css和javascipt进行了相当简单的设置。当用户点击其中一个div时，它应该显示或消失，并将隐藏的表单字段设置为“1”或“0”。

首先，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';
    }
}

和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>

我知道javascript已正确链接且可操作，因为当我通过chrome的控制台调用该函数时，它可以完美地工作并完成我的预期。但是，当我单击此div时，它不起作用！

我做错了什么？

Answer 1

你必须尝试舔你的元素而不是点击，也许它会起作用。或者改变onlick to onclick。

Answer 2

您的div最初是隐藏的（class="hidden"），因此当您运行该页面时您将看不到任何内容，并且无法点击它们。你也有拼写错误（没有onlick事件，但是： - ））：

onlick="toggle(1);"

应该是：

onclick="toggle(1);"

Answer 3

Id不能以数字开头。这是一个规范。

试试这样：

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

-

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

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

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

Answer 4

你正在设想一个隐藏元素上的事件，因此它没有做任何事情。

简单的onclick事件无法正常工作

4 个答案: