87,991
社区成员
发帖
与我相关
我的任务
分享innerTHML之后用getElementsByTagName
比如这样一个例子
<div id="divdemo">
</div>
js:
var divtest=document.getelementById('divdemo');
divtest.innerHTML="<a href=\"www.baidu.com\"/>";
var demoa=document.getElementsByTagName('a');
alert(demoa[0]);
只是举个例子，必要过分追究哪个地方有问题什么的。
假如这样写的话，好像最后弹出的值为空的。主要是什么原因引起的哪？
这是我代码：
if(document.getElementById('picList')){
//这个是获得的一个div。
var picList = document.getElementById('picList');
//下面是获得的a的标签集合。
var img = picList.getElementsByTagName("a");
var mleft = 0;
var move = setInterval(moveEvent,30);
for(var i=0;i<img.length;i++ ){
img[i].onmousemove = function(){
clearInterval(move);
}
img[i].onmouseout = function(){
setTimeout(mmove,30);
}
}
var arr = new Array();
for ( var i=0; i<img.length/2; i++){
arr[i] = -110*i;
}
}
红色部分事件没有赋予成功。不知道什么原因。
<div id="divdemo">
</div>
js:
var divtest=document.getelementById('divdemo');
divtest.innerHTML="<a href=\"www.baidu.com\"/>";
var demoa=document.getElementsByTagName('a');
alert(demoa[0]);
只是举个例子，必要过分追究哪个地方有问题什么的。
假如这样写的话，好像最后弹出的值为空的。主要是什么原因引起的哪？
这是我代码：
if(document.getElementById('picList')){
//这个是获得的一个div。
var picList = document.getElementById('picList');
//下面是获得的a的标签集合。
var img = picList.getElementsByTagName("a");
var mleft = 0;
var move = setInterval(moveEvent,30);
for(var i=0;i<img.length;i++ ){
img[i].onmousemove = function(){
clearInterval(move);
}
img[i].onmouseout = function(){
setTimeout(mmove,30);
}
}
var arr = new Array();
for ( var i=0; i<img.length/2; i++){
arr[i] = -110*i;
}
}
红色部分事件没有赋予成功。不知道什么原因。
...全文
请发表友善的回复…
发表回复
「已注销」 2013-05-02
- 打赏
- 举报
我感觉也是这么个原因。
「已注销」 2013-05-02
- 打赏
- 举报
后来我又修改了一下，鼠标的事件直接添加在了a标签上，结果解决了，我个人感觉有强迫症，虽然解决了但是感觉不完美。感谢大家的回答，谢谢。分不是很多。
苹果没有皮 2013-05-02
- 打赏
- 举报
上面截图弄错了，是这个
苹果没有皮 2013-05-02
- 打赏
- 举报
对的，大小写可能写错了，我只是举个例子代码方面的不用考虑，我是说这个程序得到的值为空，var demoa=document.getElementsByTagName('a');
demoa里面是空的，length为0，没有长度的。我想的是上下两行代码是不是同时执行了？[/quote]
demoa里面是空的，length为0，没有长度的。我想的是上下两行代码是不是同时执行了？[/quote]
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="divdemo"></div>
</body>
<script type="text/javascript">
window.onload = function(){
var divtest = document.getElementById("divdemo");
divtest.innerHTML = "<a href='www.baidu.com'></a>";
var demoa = document.getElementsByTagName("a");
alert(demoa[0]);
}
</script>
</html>
应该不是吧，我这样写了一下例子，demoa[0]不是空啊，是这样的：
猿敲月下码 2013-04-28
- 打赏
- 举报
imgstring 有没内容,看代码是没问题的
如果有内容,估计是POST请求异步的原因,但是post一直都应该是同步的
是在不行换ajax方法试试看
$.ajax({
type: "POST",
url: url,
async:false,
success: function(data){
// ..
},
error:function(e){alert('后台出错，请查看日志');}
});猿敲月下码 2013-04-27
- 打赏
- 举报
var divtest=document.getElementById('divdemo');
divtest.innerHTML="<a href=\"www.baidu.com\"/>";
var demoa=document.getElementsByTagName('a');
alert(demoa[0]);
这样是可以的,innerHTML那段代码发来看看
「已注销」 2013-04-27
- 打赏
- 举报
/**
* @author tiger
*/
function mmove(){
clearInterval(move);
move = setInterval(moveEvent,30);
}
function moveEvent(){
mleft--;
picList.style.marginLeft = mleft + 'px';
if ( mleft == arr[img.length/2-1]-110){
mleft=0;
}
for(var i=0; i<arr.length;i++){
if(arr[i] == mleft){
clearInterval(move);
setTimeout(mmove, 3000);
m = 110;
}
}
}
if(document.getElementById('piclist')){
$.post("imgLinkaction_getimglink.action",function(date){
var imgstring="";
var div=document.getElementById("piclist");
var imglist=date.split(",");
for(var i=0;i<=(imglist.length-2);i++){
imgstring+="<a href=\"${path}\"><img src=\""+imglist[i]+"></a>";
}
div.innerHTML+=imgstring;
});
var picList = document.getElementById('piclist');
alert(picList.innerHTML);//这个是为空，我不明白是什么原因。
var img = picList.getElementsByTagName("a");
var mleft = 0;
var move = setInterval(moveEvent,30);
for(var i=0;i<img.length;i++ ){
img[i].onmousemove = function(){
clearInterval(move);
}
img[i].onmouseout = function(){
setTimeout(mmove,30);
}
}
var arr = new Array();
for ( var i=0; i<img.length/2; i++){
arr[i] = -110*i;
}
}
「已注销」 2013-04-27
- 打赏
- 举报
主要是哪个var img这个对象没有获取到，是不是用innerHTML之后再用
var img = picList.getElementsByTagName("a");
获取不到。img的length为零。[/quote]是个图片滚动的效果。
「已注销」 2013-04-27
- 打赏
- 举报
/**
* @author tiger
*/
function mmove(){
clearInterval(move);
move = setInterval(moveEvent,30);
}
function moveEvent(){
mleft--;
picList.style.marginLeft = mleft + 'px';
if ( mleft == arr[img.length/2-1]-110){
mleft=0;
}
for(var i=0; i<arr.length;i++){
if(arr[i] == mleft){
clearInterval(move);
setTimeout(mmove, 3000);
m = 110;
}
}
}
if(document.getElementById('piclist')){
//我在这里调用imgLinkaction_getimglink.action从后台返回一个字符串，然后进行分割字符串，
//获得piclistdiv指的就是后面的这个div--var div=document.getElementById("piclist"); 后把分割的字符串加上超链接进行了拼接，然后piclistdiv.innerHTML=拼接的代码。
//如果你从$.post方法体外面在去获得piclistdiv.innerHTML那就是空的
//了。
$.post("imgLinkaction_getimglink.action",function(date){
var imgstring="";
var div=document.getElementById("piclist");
var imglist=date.split(",");
for(var i=0;i<=(imglist.length-2);i++){
imgstring+="<a href=\"${path}\"><img src=\""+imglist[i]+"\"/></a>";
}
div.innerHTML+=imgstring;
});
var picList = document.getElementById('piclist');
var img = picList.getElementsByTagName("a");
var mleft = 0;
var move = setInterval(moveEvent,30);
for(var i=0;i<img.length;i++ ){
img[i].onmousemove = function(){
clearInterval(move);
}
img[i].onmouseout = function(){
setTimeout(mmove,30);
}
}
var arr = new Array();
for ( var i=0; i<img.length/2; i++){
arr[i] = -110*i;
}
}
「已注销」 2013-04-26
- 打赏
- 举报
主要是哪个var img这个对象没有获取到，是不是用innerHTML之后再用
var img = picList.getElementsByTagName("a");
获取不到。img的length为零。
「已注销」 2013-04-26
- 打赏
- 举报
对的，大小写可能写错了，我只是举个例子代码方面的不用考虑，我是说这个程序得到的值为空，var demoa=document.getElementsByTagName('a');
demoa里面是空的，length为0，没有长度的。我想的是上下两行代码是不是同时执行了？
「已注销」 2013-04-26
- 打赏
- 举报
恩，这个length是为0的，没有获取到。我在想是不是他们同时执行了，或者后者比前者执行快了一步
猿敲月下码 2013-04-26
- 打赏
- 举报
for(var i=0;i<img.length;i++ ){
img[i].onmousemove = function(){
clearInterval(move);
}
img[i].onmouseout = function(){
setTimeout(mmove,30);
}
}
改成
for(var i=0;i<img.length;i++ ){
(function(i){
img[i].onmousemove = function(){
clearInterval(move);
}
img[i].onmouseout = function(){
setTimeout(mmove,30);
}
})(i);
}
具体原因可参照:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE> New Document </TITLE>
<script type="text/javascript">
window.onload=function(){
var buttons = ['b1','b2','b3']
for(var i=0;i<buttons.length;i++ ){
(function(i){
document.getElementById(buttons[i]).onclick = function(){
alert(i)
}
})(i);
// 尝试着把上面的注释掉,用下面的看看效果
//document.getElementById(buttons[i]).onclick = function(){
// alert(i)
// }
}
}
</script>
</HEAD>
<BODY>
<button id="b1">b1</button>
<button id="b2">b2</button>
<button id="b3">b2</button>
</BODY>
</HTML>
苹果没有皮 2013-04-26
- 打赏
- 举报
第一个例子上是你的getElementById方法大小写弄错了吧,
我这样写红色的事件可以触发唉
var divtest=document.getElementById('divdemo');
divtest.innerHTML="<a href=\"#\">aaaaaaaaaaaaa</a><a href=\"#\">bbbbbbbbbbbbbbbb</a><a href=\"#\">ccccccccccccccc</a>";
var img=document.getElementsByTagName('a');
var move = setInterval(function(){
console.log("setInterval....................");
}, 30);
for(var i=0;i<img.length;i++){
img[i].onmousemove = function(){
console.log("onmousemove");
clearInterval(move);
};
img[i].onmouseout = function(){
setTimeout(function(){
console.log("setTimeout");
}, 30);
};
}
ac382717036 2013-04-26
- 打赏
- 举报
你是想做图片轮播的效果吧，当鼠标放上去图片停止轮播，鼠标放开图片继续轮播 img[i].onmouseover = function(){
clearInterval(move);
}
img[i].onmouseout = function(){
move = setInterval(moveEvent,30);
}
还有你上面的输出alert(demoa[0]);你改为alert（demoa.length）;看看应该有结果的
