简单的代码却不知道错在哪里。。。

来源:9-6 setAttribute()方法

慕粉4203582

2016-11-08 17:44

<!DOCTYPE html>

<html>

<script>

window.onload=function ()

{

var biaoji=document.getElementsByName('biaoji').innerHTML;

var span=document.getElementsByTagName('span');

        var i;

   for(i=0;i<biaoji.length;i++)

   {

        biaoji[i].index=i;

        if(biaoji[i]=="1")

        {

              span[this.index].innerHTML="Hello World";

          }

      }

  }

</script>

<body>

<div name="biaoji">1</div>

<div name="biaoji">1</div>

<div name="biaoji">1</div>

<span>我爱你</span>

<span>我爱你1</span>

<span>我爱你2</span>

</body>

</html>

写回答 关注

5回答

  • A空城
    2016-11-09 15:38:44
    已采纳

    var biaoji=document.getElementsByName('biaoji').innerHTML;

    var span=document.getElementsByTagName('span');

    以上这两句都写错了,ByName和ByTagName是集合型式的,你这样得到的是一个空的,必须要通过下标来得到组,要得到组里的数据就通过childNodes得到他下面组里所有的节点数据;

    <script>

    window.onload=function ()

    {

    var biaoji=document.getElementsByName('biaoji')[0].childNodes;

    var span=document.getElementsByTagName('p')[0].childNodes;

            var i;

       for(i=0;i<biaoji.length;i++)

       {   

           var n=biaoji[i].innerHTML;

      if(n=="1")

            {

                  span[i].innerHTML="Hello World";

              }


     

          }

      }

    </script>

    <body>

    <div name="biaoji">

    <div>1</div>

    <div>1</div>

    <div>1</div>

    </div>

    <p>

    <span>我爱你</span>

    <span>我爱你1</span>

    <span>我爱你2</span>

    </p>

    </body>


    A空城 回复慕粉4203...

    这个不用JS也可以得到这个效果;用JS的话也可以;

    2016-11-10 12:22:39

    共 2 条回复 >

  • A空城
    2016-11-10 12:30:43

    这样写会更好一点,DIV里面文本和P标签里的文本可以随意更改内容

    <style>

    p{ display:none;}

    .dis{ display:block;}

    </style>

    <body>

    <div>3</div>

    <span><p>我爱你1</p><p>我爱你2</p><p>我爱你3</p></span>

    <div>4</div>

    <span><p>我爱你7</p><p>我爱你8</p><p>我爱你9</p></span>

    <div>5</div>

    <span><p>我爱你4</p><p>我爱你5</p><p>我爱你6</p></span>

    </body>

    <script>

     var div1=document.getElementsByTagName('div')[0];

     var div2=document.getElementsByTagName('div')[1];

     var div3=document.getElementsByTagName('div')[2];

     var sapn1= document.getElementsByTagName('span')[0];

     var sapn2= document.getElementsByTagName('span')[1];

     var sapn3= document.getElementsByTagName('span')[2];

     div1=sapn1.lastChild.setAttribute('class','dis');

     div2=sapn2.lastChild.setAttribute('class','dis');

     div3=sapn3.lastChild.setAttribute('class','dis');

     

    </script>


  • A空城
    2016-11-10 12:23:03

    <style>

    p{ display:none;}

    .dis{ display:block;}

    </style>

    <body>

    <div>1</div>

    <span><p>我爱你1</p><p>我爱你2</p><p>我爱你3</p></span>

    <div>2</div>

    <span><p>我爱你7</p><p>我爱你8</p><p>我爱你9</p></span>

    <div>3</div>

    <span><p>我爱你4</p><p>我爱你5</p><p>我爱你6</p></span>

    </body>

    <script>

     var div1=document.getElementsByTagName('div')[0].innerHTML;

     var div2=document.getElementsByTagName('div')[1].innerHTML;

     var div3=document.getElementsByTagName('div')[2].innerHTML;

     var sapn1= document.getElementsByTagName('span')[0];

     var sapn2= document.getElementsByTagName('span')[1];

     var sapn3= document.getElementsByTagName('span')[2];

     if(div1=='1' || div2=='2' || div3=='3'){

    sapn1.lastChild.setAttribute('class','dis');

    sapn2.lastChild.setAttribute('class','dis');

    sapn3.lastChild.setAttribute('class','dis');

    }

     

    </script>


  • 慕粉4203582
    2016-11-09 16:26:57

    <!DOCTYPE html>

    <html>

    <style>

    span .span1{

    display:none;

    }

    span .span2{

    display:none;

    }

    span .span3{

    display:none;

    }

    </style>

    <script>

    window.onload=function ()

    {

    var biaoji=document.getElementsByName('biaoji');

    var span=document.getElementsByTagName('span');

    var p1=document.getElementsByName('p1');

    var p2=document.getElementsByName('p2');

    var p3=document.getElementsByName('p3');

    var i;

    for(i=0;i<biaoji.length;i++)

      {

       biaoji.index=i;

       if(parseInt(biaoji[i].innerHTML)==1)

        {

            span[i].innerHTML="Hello World";

          }

         else if(parseInt(biaoji[i].innerHTML)==2)

          {

       span[i].innerHTML="nimei";

            }

     else if(parseInt(biaoji[i].innerHTML)==3)

     {

     p3.style.display = 'block';

     }

       }

      }

    </script>

    <body>

    <div name="biaoji">1</div>

    <span><p name="p1" class="span1">我爱你1</p><p name="p2" class="span2">我爱你2</p><p name="p3" class="span3">我爱你3</p></span>

    <div name="biaoji">2</div>

    <span><p name="p1" class="span1">我爱你7</p><p name="p2" class="span2">我爱你8</p><p name="p3" class="span3">我爱你9</p></span>

    <div name="biaoji">3</div>

    <span><p name="p1" class="span1">我爱你4</p><p name="p2" class="span2">我爱你5</p><p name="p3" class="span3">我爱你6</p></span>

    </body>

    </html>


  • 慕粉5830429
    2016-11-08 23:33:12

    var biaoji=document.getElementsByName('biaoji').innerHTML; 这一行代码有误, document.getElementsByName('biaoji') 这个获取的是一个对象的数组, 没有innerHTML 属性的。 有length 属性.

JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

468061 学习 · 21891 问题

查看课程

相似问题