87,843
社区成员
发帖
与我相关
我的任务
分享js中为什么老是显示未定义呢
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
p,ul{ margin:0; padding:0;}
li{ list-style:none;}
#div1{ width:500px; position:relative;}
#left{ width:250px; float:left; height:40px; line-height:40px;}
#left p{ float:left; font-size:16px; color:#222; font-weight:700;}
#left p b{ color:#F00;}
#left ul{ float:left;}
#left ul li{ width:20px; height:22px; float:left; background:url(img/xing1.jpg) no-repeat center; margin-left:5px; margin-top:8px;}
#left span{ float:left; font-size:16px; font-weight:700; color:#ef7300; margin-left:5px;}
#right{ width:241px; height:40px; float:right; background:url(img/tishibg.jpg) no-repeat; padding-left:8px; position:absolute; left:200px;}
#right p{ line-height:40px; font-size:12px; color:#94948c; float:left; }
#right img{float:left; margin:10px 0 0 5px;}
</style>
<script>
window.onload = function(){
var oLeft = document.getElementById('left');
var oRight = document.getElementById('right');
var oSpan = oLeft.getElementsByTagName('span')[0];
var oUl = oLeft.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var arrText = ['很差','较差','一般','推荐','力荐'];
oLeft.onmouseover = function(){
oRight.style.display = 'none';
for( var i=0; i<aLi.length; i++){
aLi[i].index = i;
oSpan.innerHTML = arrText[this.index];
aLi[i].onmouseover = function(){
oRight.style.display = 'none';
this.style.background = 'url(img/xing3.jpg)';
oSpan.innerHTML = arrText[this.index];
};
};
};
oLeft.onmouseout = function(){
oRight.style.display = 'block';
};
};
</script>
</head>
<body>
<div id="div1">
<div id="left">
<p><b>*</b>总体评价</p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<span></span>
</div>
<div id="right"><p>小提示：点击星星就能评分</p><img src="img/tishi.jpg" width="78" height="25" /></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
p,ul{ margin:0; padding:0;}
li{ list-style:none;}
#div1{ width:500px; position:relative;}
#left{ width:250px; float:left; height:40px; line-height:40px;}
#left p{ float:left; font-size:16px; color:#222; font-weight:700;}
#left p b{ color:#F00;}
#left ul{ float:left;}
#left ul li{ width:20px; height:22px; float:left; background:url(img/xing1.jpg) no-repeat center; margin-left:5px; margin-top:8px;}
#left span{ float:left; font-size:16px; font-weight:700; color:#ef7300; margin-left:5px;}
#right{ width:241px; height:40px; float:right; background:url(img/tishibg.jpg) no-repeat; padding-left:8px; position:absolute; left:200px;}
#right p{ line-height:40px; font-size:12px; color:#94948c; float:left; }
#right img{float:left; margin:10px 0 0 5px;}
</style>
<script>
window.onload = function(){
var oLeft = document.getElementById('left');
var oRight = document.getElementById('right');
var oSpan = oLeft.getElementsByTagName('span')[0];
var oUl = oLeft.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var arrText = ['很差','较差','一般','推荐','力荐'];
oLeft.onmouseover = function(){
oRight.style.display = 'none';
for( var i=0; i<aLi.length; i++){
aLi[i].index = i;
oSpan.innerHTML = arrText[this.index];
aLi[i].onmouseover = function(){
oRight.style.display = 'none';
this.style.background = 'url(img/xing3.jpg)';
oSpan.innerHTML = arrText[this.index];
};
};
};
oLeft.onmouseout = function(){
oRight.style.display = 'block';
};
};
</script>
</head>
<body>
<div id="div1">
<div id="left">
<p><b>*</b>总体评价</p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<span></span>
</div>
<div id="right"><p>小提示：点击星星就能评分</p><img src="img/tishi.jpg" width="78" height="25" /></div>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
天际的海浪 2015-09-14
- 打赏
- 举报
window.onload = function(){
var oLeft = document.getElementById('left');
var oRight = document.getElementById('right');
var oSpan = oLeft.getElementsByTagName('span')[0];
var oUl = oLeft.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var arrText = ['很差','较差','一般','推荐','力荐'];
for( var i=0; i<aLi.length; i++){
aLi[i].index = i;
aLi[i].onmouseover = function(){
oRight.style.display = 'none';
this.style.background = 'url(img/xing3.jpg)';
oSpan.innerHTML = arrText[this.index];
};
oLeft.onmouseover = function(){
oRight.style.display = 'none';
};
};
oLeft.onmouseout = function(){
oRight.style.display = 'block';
};
};
