Question

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
<title>YUI Calendar Control Example</title>
<link rel="stylesheet"
type="text/css"
href="yui/build/calendar/assets/skins/sam/calendar.css">
<script type="text/javascript"
src="yui/build/yahoo-dom-event/
yahoo-dom-event.js"></script>
<script type="text/javascript"
src="yui/build/calendar/calendar-min.js"></script>
<style type="text/css">
input {
margin:0px 10px 0px 10px;
}
</style>
</head>
<body class="yui-skin-sam">
<div>
<label>Please enter your date of birth:</label>
<input type="text" name="dobfield" id="dobfield">
<img id="calico" src="E:\HP_PROJECT\cal.png"
alt="Open the Calendar control">
</div>
<div id="mycal"></div>
<script type="text/javascript">
//create the namespace object for this example
YAHOO.namespace("yuibook.calendar");
//define the lauchCal function which creates the calendar
YAHOO.yuibook.calendar.launchCal = function() {
//create the calendar object, specifying the container
Var myCal = new YAHOO.widget.Calendar("mycal");
//draw the calendar on screen
myCal.render();


}
//define the showCal function which shows the calendar
Var showCal = function() {
//show the calendar
myCal.show();
}

//create calendar on page load
YAHOO.util.Event.onDOMReady(YAHOO.yuibook.calendar.launchCal);
 //attach listener for click event on calendar icon
YAHOO.util.Event.addListener("calico", "click", showCal);  
//myCal.hide();



</script>

</body>
</html>

我使用了上面的代码。但代码的问题是，当我单击图像图标时，不会显示任何内容。我是javascript的新手。请帮我讲解如何实现监听器。

请指导我在代码中执行哪些操作。

由于 Padmaja

Answer 1

问题是myCal是launchCal()函数的局部变量。为myCal变量提供全局可访问的命名空间将使其可用于每个范围。

这是您的原始代码（其他人不小心将我的正确代码放在原始问题中= /）

YAHOO.namespace("yuibook.calendar"); 

//define the lauchCal function which creates the calendar 
YAHOO.yuibook.calendar.launchCal = function() { 

    //create the calendar object, specifying the container 
    var myCal = new YAHOO.widget.Calendar("mycal"); 

    //draw the calendar on screen 
    myCal.render(); 
}

//define the showCal function which shows the calendar
Var showCal = function() { 
    //show the calendar 
    myCal.show(); 
} 

//create calendar on page load
YAHOO.util.Event.onDOMReady(YAHOO.yuibook.calendar.launchCal); 

//attach listener for click event on calendar icon 
YAHOO.util.Event.addListener("calico", "click", showCal); 

//myCal.hide();

现在查看我的更改。请注意使用全局YAHOO命名空间。

YAHOO.namespace("yuibook.calendar"); 

//define the lauchCal function which creates the calendar 
YAHOO.yuibook.calendar.launchCal = function() { 

    //create the calendar object, specifying the container 
    YAHOO.yuibook.calendar.myCal = new YAHOO.widget.Calendar("mycal"); 

    //draw the calendar on screen 
    myCal.render(); 
}

//define the showCal function which shows the calendar
Var showCal = function() { 
    //show the calendar 
    YAHOO.yuibook.calendar.myCal.show(); 
} 

//create calendar on page load
YAHOO.util.Event.onDOMReady(YAHOO.yuibook.calendar.launchCal); 

//attach listener for click event on calendar icon 
YAHOO.util.Event.addListener("calico", "click", showCal); 

//myCal.hide();

实现监听器

1 个答案: