Home  >  Q&A  >  body text

javascript - JS这样获取元素为什么会报错?

Uncaught TypeError: op1[i].getElementsByName is not a function
为什么会报这个错误 为什么改成通过id获取就不会报错了?
而且我想要的效果是点击显示按钮时就把按钮对应的左侧的数字显示在下面的蓝色的方块里面 我这样写对吗?

<html>
    <head>
        <meta charset="utf-8">
        <style>
         #p2{width:50px;height:50px;background-color: blue;}
        </style>
        <script type="text/javascript"> 
        window.onload=function(){
          var op1=document.getElementsByName('p1');
          var op2=document.getElementsByName('p2');
          var oShow=document.getElementsByName('show');
          var oAge=document.getElementsByName('age');
          for(i=0;i<op1.length;i++){
            oSh=op1[i].getElementsByName('show'); //这里报错
            for(j=0;j<oSh.length;j++){
              oSh[j].index=j;
              oSh[j].onclick=function(){
                 age=oAge[this.index].innerHTML;
                 op2[i].innerHTML=age;
              }
            }
          }
        }
       </script>
    </head>
<body>
<p name="p1">
  <span name="age">111</span><span name="show">显示</span><br />
  <span name="age">222</span><span name="show">显示</span><br />
  <span name="age">333</span><span name="show">显示</span>
  <p name="p2" id="p2"></p>
</p>
<p name="p1">
  <span name="age">444</span><span name="show">显示</span><br />
  <span name="age">555</span><span name="show">显示</span><br />
  <span name="age">666</span><span name="show">显示</span>
  <p name="p2" id="p2"></p>
</p>
</body>
</html>
PHP中文网PHP中文网2772 days ago532

reply all(3)I'll reply

  • 黄舟

    黄舟2017-04-11 11:09:09

    一、确定改成element.getElementById就不报错了吗?
    element只有三个方法

    1. Element.getElementsByTagName

    2. Element.getElementsByClassName

    3. Element.getElementsByTagNameNS

    其他的那些都是document的方法。不一样的。
    选取元素的时候尽量还是使用class和id。


    二、程序运行上也是有问题的。
    op2[i].innerHTML=age;这一块。运行的时候去外部查找i的值。外部运行完i已经是2了,所以op2[i]就会是undefined,建议传参或者使用闭包。可能修改的时候还会有连续的错误,先自己修改一下吧。

    reply
    0
  • PHP中文网

    PHP中文网2017-04-11 11:09:09

    op1[i]是一个元素,并没有getElementsByName方法

    reply
    0
  • 高洛峰

    高洛峰2017-04-11 11:09:09

    用document啊你上面都是document,下面还不是一样

    reply
    0
  • Cancelreply