简单的onclick事件不起作用

我已经用html，css和javascipt进行了相当简单的设置。当用户点击其中一个div时，它应该出现或消失，以及将隐藏表单字段设置为“1”或“0”。简单的onclick事件不起作用

首先，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链接正确和可操作性，因为当我打电话功能通过铬的控制台，它完美的作品，并做我的期望。但是，当我点击这个div时，它不起作用！

我在做什么错？

来源

2011-09-03 Matthew Sainsbury

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

onlick="toggle(1);"

也许应该是：

onclick="toggle(1);"

来源

2011-09-03 10:02:18

你死定了。如果div被隐藏，虽然页面上仍有空间，但它不会对用户输入做出反应。谢谢！ –

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>

来源

2011-09-03 09:58:56

谢谢，但它并没有解决我的问题 –

还有一个错字。的onclick。 –

我的两个解决方案组合应该可以工作。只需复制并粘贴代码。 –

你必须设法舔你的元素没有点击，也许那会工作。或者将onlick改为onclick。

来源

2011-09-03 10:00:09 codez

哈哈。谢谢XD。但点击也不起作用 –

您正在设置隐藏元素上的事件，我认为它并没有做任何事情。

来源

2011-09-03 10:01:02

简单的onclick事件不起作用

回答

相关问题