2011-09-03 162 views
0

我已經用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時,它不起作用!

我在做什麼錯?

回答

1

您的div最初是隱藏的(class="hidden"),所以當您運行該頁面時您將看不到任何內容,並且無法點擊它們。你也有錯別字(沒有onlick事件,但:-)):

onlick="toggle(1);" 

也許應該是:

onclick="toggle(1);" 
+0

你死定了。如果div被隱藏,雖然頁面上仍有空間,但它不會對用戶輸入做出反應。謝謝! –

0

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> 
+0

謝謝,但它並沒有解決我的問題 –

+0

還有一個錯字。的onclick。 –

+0

我的兩個解決方案組合應該可以工作。只需複製並粘貼代碼。 –

1

你必須設法舔你的元素沒有點擊,也許那會工作。或者將onlick改爲onclick。

+0

哈哈。謝謝XD。但點擊也不起作用 –

0

您正在設置隱藏元素上的事件,我認爲它並沒有做任何事情。