Javascript无法正常工作

我使用此代码在您将鼠标悬停在其上时（星级系统）使星星点亮。它在Chrome中绝对完美，但是当我尝试在IE中使用它时，它什么也没做。任何人都可以帮助我在IE中做这项工作？（是的，我知道代码看起来很可怕，我对JavaScript很陌生，这可能是为什么会发生这种错误）。我很确定它来自这部分的Javascript代码，使所有的东西都没有定义：Javascript无法正常工作

var star_all = document.getElementsByName('stars'); 

for (x in star_all){ 
    var stars = new Array(); 
    stars[0]=childbyid(star_all[x], 'str1');

不管怎么说，这里是所有的代码：

HTML代码：

<div name="stars" class="stars"> 
    <input name="bob" id="hid" type="hidden" /> 
    <div id="str1" style="display: inline-block;" class="no_star"></div> 
    <div id="str2" style="display: inline-block;" class="no_star"></div> 
    <div id="str3" style="display: inline-block;" class="no_star"></div> 
    <div id="str4" style="display: inline-block;" class="no_star"></div> 
    <div id="str5" style="display: inline-block;" class="no_star"></div> 
</div>

JavaScript代码：

<script type="text/javascript"> 
function isElement(obj) { 
    try { 
     return obj instanceof HTMLElement; 
    } 
    catch(e){ 
     return (typeof obj==="object") && 
      (obj.nodeType===1) && (typeof obj.style === "object") && 
      (typeof obj.ownerDocument ==="object"); 
    } 
} 
function childbyid(el, str) 
{ 
    var children = el.childNodes; 
    for(i in children) 
    { 
     if (isElement(children[i]) === true && typeof children[i] != 'undefined') 
     { 
      if (children[i].getAttribute('id') == str) 
      { 
       return children[i]; 
      } 
     } 
    } 
} 

var star_bob = new Array(); 
function select(arr, n) 
{ 
    star_bob[arr][2] = n; 
    star_bob[arr][1].setAttribute("value", n+1); 
    if (document.getElementById('star_post') != null) 
    { 
     document.getElementById('star_post').submit(); 
    } 
} 

function highlight(arr, n) 
{ 
    if (n == -1) 
    { 
     n = star_bob[arr][2]; 
    } 
    arr = star_bob[arr][0]; 
    for (z in arr){ 
     if (z <= n){ 
      arr[z].setAttribute("class", "full_star") 
     } 
     else 
     { 
      arr[z].setAttribute("class", "no_star") 
     } 
    } 
} 

var star_all = document.getElementsByName('stars'); 

for (x in star_all){ 
    var stars = new Array(); 
    stars[0]=childbyid(star_all[x], 'str1'); 
    stars[1]=childbyid(star_all[x], 'str2'); 
    stars[2]=childbyid(star_all[x], 'str3'); 
    stars[3]=childbyid(star_all[x], 'str4'); 
    stars[4]=childbyid(star_all[x], 'str5'); 

    for (o in stars){ 
     if (typeof stars[o] != 'undefined') 
     { 
      stars[o].setAttribute("onmouseover", "highlight(" + x + ", " + o + ")") 
      stars[o].setAttribute("onmouseout", "highlight(" + x + ", -1)") 
      stars[o].setAttribute("onclick", "select(" + x + ", " + o + ")"); 
     } 
    } 
    if (typeof star_all[x] == "object") 
    { 
     star_bob[x] = new Array(stars, childbyid(star_all[x],"hid"),-1); 
    } 
} 
</script>

来源

2011-06-16 Matt

好吧，star_bob是在if语句中创建的，所以也许它永远不会被创建。 – 2011-06-16 03:44:10

请勿使用'for ... in'来遍历数组。它意味着对象。 https://developer.mozilla.org/en/JavaScript/Reference/Statements/for...#############为什么不使用跨浏览器库？那'isElement'功能就是一场灾难。我很欣赏你试图在不依赖DOM库的情况下学习JavaScript，但这对我来说似乎并不富有成效。 – 2011-06-16 03:56:56

是的，我应该使用jQuery。我只是觉得用普通的JS会比较容易。 – Matt 2011-06-16 04:06:10

你有几个问题：

div元素没有name属性，所以不要使用它。如果你想分组元素，请使用一个类。
getElementsByName返回一个活动的NodeList，最好使用索引来遍历它，因为它可能具有您不期望的可枚举属性。
isElement测试是垃圾，你正在遍历一个NodeList，所以它的一切都是一个节点。要过滤元素，请抓取nodeType == 1的元素。浏览器不必将元素实现为ECMAScript对象，因此不要期望它们。
更好地将样式放入样式表中。
由于id的唯一性（除非您期望id可能不在应该出现的位置），childbyid函数可以被单个getElementById调用替代。
不像HTML那样编码，它不是XML。

的替换isElement功能（便宜和讨厌的，但有效的这种情况下）：

function isElement(obj) { 
    return obj && obj.nodeType == 1; 
}

的替换childbyid功能（似乎毫无意义，应该只使用的getElementById）：

function childbyid(el, str) { 
    var children = el.childNodes; 
    var i = children.length; 

    while (i--){ 
    if (children[i].id == str) { 
     return children[i]; 
    } 
    } 
}

可能不会解决所有问题，但可能会有所帮助。整个事情需要重新编写，不要使用jQuery或任何其他库，首先学习JavaScript。然后你会意识到你不需要jQuery。

来源

2011-06-16 07:14:03 RobG

Javascript无法正常工作

回答

相关问题