以下のコードは期待どおりに機能しているようです。背景色を赤から青に切り替えます(FireFox8.0およびChrome17.0.942.0でテスト済み)。
<html>
<head>
<style type="text/css">
#popup{
position:relative;
height:100px;
width:100px;
margin:10px;
background-color:red;
}
.hide{
background-color:blue !important;
}
</style>
<script type="application/javascript" src="http://xuijs.com/downloads/xui-2.3.2.min.js"></script>
<script type="application/javascript">
x$.ready(function() {
document.getElementById('nearest').addEventListener('click', function(){
x$("#popup").toggleClass('hide');
}, false);
});
</script>
</head>
<body>
<div id="popup" class="hide"></div>
<input id="nearest" type="image" name="nearest" />
</body>
</html>
確認のために、document.getElementId()
最初に使用したのは関数の一部であるか、onLoadスクリプトで囲まれていると思いますか?作業例では、XUIready()
関数を使用して、DOMがロードされたことを確認しました。
とにかくXUIを使用しているので、以下のコードが同等であることにも注意してください。
x$.ready(function() {
x$('#nearest').click(function(){
x$("#popup").toggleClass('hide');
});
});