慕粉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>
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>
这样写会更好一点,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>
<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>
<!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>
var biaoji=document.getElementsByName('biaoji').innerHTML; 这一行代码有误, document.getElementsByName('biaoji') 这个获取的是一个对象的数组, 没有innerHTML 属性的。 有length 属性.
JavaScript进阶篇
468190 学习 · 21891 问题
相似问题