getElementsByName只?

时间:2012-11-29 07:24:31

标签: javascript html5

以下代码用于更改一个字段的颜色:

<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
  </head>
  <body>
    <form></form>
    <form>
      <input name="thisone" />
    </form>
    <script language="javascript">
      var bkColor = "red";
      function getEvent(e){
        if(window.event != null) {
          return event;
        }
        return e;
      }
      function setBKColor(e){
        e = getEvent(e);
        var src =  e.srcElement || e.target;
        window.status="t";
        if(src != null) {
          src.style.bkColor = src.style.backgroundColor;
          src.style.backgroundColor = bkColor;
        }
      }
      function reSetBKColor(e){
        e = getEvent(e);
        var src =  e.srcElement || e.target;
        if(src != null) {
          src.style.backgroundColor = src.style.bkColor;
        }
      }
      function attachEvent(name,element,callBack) {
        if (element.addEventListener) {
          element.addEventListener(name, callBack,false);
        } else if (element.attachEvent) {
          element.attachEvent('on' + name, callBack);
        }
      }
      function setListner(eve,func) {
        var ele = document.forms[0].elements;
        for(var i = 0; i <ele.length;i++) {
          element = ele[i];
          if (element.name) {
            switch (element.name) {
              case 'thisone':
                attachEvent(eve,element,func);
            }
          }
        }
      }
      setListner("focus",setBKColor);
      setListner("blur",reSetBKColor);
    </script>

但是,在更改颜色的字段之前还有另一种形式时,代码停止工作。所以目前HTML代码看起来像这样,以配合不便之处:

<name="thisone">
<form></form>
<form></form>

现在这段代码有效了。

但是如何使JS部分独立于<form>,并且只依赖于文本字段的<Name>

1 个答案:

答案 0 :(得分:2)

在表单中添加一个id并使用它来引用它

function setListner(eve,func) {
   var ele = document.getElementById("#formID").elements;

在DOM中使用表单索引是访问其元素的不可靠方式