- 首页
- 前端开发
- getElementById 仅返回第一个元素的值
getElementById 仅返回第一个元素的值
[英] getElementById returning value only for first element
本文介绍了getElementById 仅返回第一个元素的值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个脚本，它根据请求在一些生成的元素上调用，并按 id 选择指定的元素.我遇到的一个奇怪的问题是，选择完美地适用于页面上的第一项，但对于其他所有项都返回 null.这可能是什么原因?
这是相关的 Javascript:
这里是 html 的一部分
<div class="embed-container" id="93_embed">
<div class="rateit" style="margin: 12px 0px;"id="input-93" data-rateit-min="0" data-rateit-max="10" data-rateit-step="0.5" data-rateit-value="1">率链接
<a style="float: right; color: white;"href="javascript:void(0);"onclick="toggleDiv('93');"title="隐藏视图" class="btn btn-default no-bord-left"><i class="fa fa-minus-square"></i>隐藏视图<form method="POST" action="http://varmium.com/links/reportLink/%7Bid%7D" accept-charset="UTF-8" id="93_linkform" style="color: white; margin: 2px; 浮动: 右"><input name="_token" type="hidden" value="cQQjBjZpmhefNxqWgeL7z5w4L9IMAUExSIMxX99P"><a href="http://varmium.com/login" title="Bad Link" class="btn btn-default no-bord-left"><i class="fa fa-trash-o"></i>坏链接
<div class="row Responds" id="93_report-responses" style="clear: both;">
<p></p><span class="row grey-out">发布日期:2014-04-06</span>
<小时><div class="media col-sm-12"><div class="pull-left col-sm-3"><img src="http://image.tmdb.org/t/p/w300/oGkDVdlPewF60qwKfWfyhWTXL5f.jpg" alt="狮子与玫瑰海报" class="media-object img-responsive thumb">
<div class="media-body col-sm-9"><风格>.embed-container { 位置:相对；清除:两者；填充底部:56.25%；填充顶部:30px；高度:100%；溢出:隐藏；最大宽度:100%；高度:自动；} .embed-container iframe, .embed-container 对象, .embed-container embed { position: absolute;顶部:0；左:0；宽度:100%；高度:100%；}</风格><div class="links-section"><h3>看法<dt style="float: left;">关联:</dt><dd style="颜色:黑色；"><a href="javascript:void(0)" onclick="showFrame('x3Ciframex20widthx3Dx22640x22x20heightx3Dx22360x22x20frameborderx3Dx220x22x20scrollingx3Dx22NOx22x20marginheightx3Dx220x22x20marginwidthx3Dx220x22x20srcx3Dx22httpx3Ax2Fx2Fvodlockerx2Ecomx2Fembedx2Fembedx2Dwsx20Dx3Dx20Dx220x22Dx3Dx220x22Dx20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x3Cx2Fiframex3E', 945,10); return false;">http://vodlocker.com</a><span class="质量"><i class="fa fa-signal"></i></span>高清<span class="语言"><i class="fa fa-flag"></i></span><span class="评级"><i class="fa fa-star"></i></span>10</dd><dt style="float: left;">关联:</dt><dd style="颜色:黑色；"><a href="javascript:void(0)" onclick="showFrame('x3Ciframex20widthx3Dx22640x22x20heightx3Dx22360x22x20frameborderx3Dx220x22x20scrollingx3Dx22NOx22x20marginheightx3Dx220x22x20marginwidthx3Dx220x22x20srcx3Dx22httpx3Ax2Fx2Fplayedx2Etox2Fembedx2Dtk4Dx20x3Ax20x3Dtkzysx20x3Dx20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x3Cx2Fiframex3E', 945,10); return false;">http://played.to</a><span class="质量"><i class="fa fa-signal"></i></span>高清<span class="语言"><i class="fa fa-flag"></i></span><span class="评级"><i class="fa fa-star"></i></span>10</dd><dt style="float: left;">关联:</dt><dd style="颜色:黑色；"><a href="javascript:void(0)" onclick="showFrame('x3Ciframex20widthx3Dx22910x22x20heightx3Dx22425x22x20frameborderx3Dx220x22x20scrollingx3Dx22NOx22x20marginheightx3Dx220x22x20marginwidthx3Dx220x22x20srcx3Dx22httpx3Ax2Fx2Fthefilex2Emex2Fembedx2D1oj5xhtmlx2Dx2Dx3Dx220x22Dx2D1oj9Dxhtmlx20Dx22Dx20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x3Cx2Fiframex3E', 945,10); 返回 false;">http://thefile.me</a><span class="质量"><i class="fa fa-signal"></i></span>高清<span class="语言"><i class="fa fa-flag"></i></span><span class="评级"><i class="fa fa-star"></i></span>10</dd>
<div id="94_container" style="display:none"><div class="embed-container" id="94_embed">
<div class="rateit" style="margin: 12px 0px;"id="input-94" data-rateit-min="0" data-rateit-max="10" data-rateit-step="0.5" data-rateit-value="1">率链接
<a style="float: right; color: white;"href="javascript:void(0);"onclick="toggleDiv('94');"title="隐藏视图" class="btn btn-default no-bord-left"><i class="fa fa-minus-square"></i>隐藏视图<form method="POST" action="http://varmium.com/links/reportLink/%7Bid%7D" accept-charset="UTF-8" id="94_linkform" style="color: white; margin: 2px; 浮动: 右"><input name="_token" type="hidden" value="cQQjBjZpmhefNxqWgeL7z5w4L9IMAUExSIMxX99P"><a href="http://varmium.com/login" title="Bad Link" class="btn btn-default no-bord-left"><i class="fa fa-trash-o"></i>坏链接
<div class="row Responds" id="94_report-responses" style="clear: both;">
<p></p><span class="row grey-out">发布日期:2014-04-13</span>
<小时><div class="media col-sm-12"><div class="pull-left col-sm-3"><img src="http://image.tmdb.org/t/p/w300/2FHwJZA82xHGMZE15Uq7IvW9grJ.jpg" alt="断链者海报" class="media-object img-responsive thumb">
解决方案
您的 HTML 无效(没有结束表单标签).如有疑问，请将您的 HTML 粘贴到 JSFiddle 中并查找任何以红色突出显示的元素.
因为 ID 元素是 forms，所以页面有问题.
如果您关闭第一个表单元素，则发现第二个表单元素正常.
I have a script which is called on request on some generated elements, and selects specified element by id. The bizarre issue I'm experiencing is that the select perfectly works for the first item on the page but returns null for every other item. What could be the cause of this?
Here's the relevant Javascript:
<script type="text/javascript">
function showFrame(content, id, vid, crating)
{
var container = document.getElementById(vid+'_container');
$('#'+vid+'_embed').html(content);
$('#'+vid+'_embed iframe').attr('SCROLLING', 'YES');
var linkform = document.getElementById(vid + '_linkform');
linkform.setAttribute('action', '{{ url('/links/reportLink/') }}' + '/' + id);
$(document).on('submit', '#' + vid+ '_linkform', function() {
$.ajax({
url : $(this).attr('action'),
type : $(this).attr('method'),
data : $(this).serialize(),
beforeSend: function()
{
$('#ajax-loading').show();
},
success : function( data ) {
if (data == '{{trans("main.embeds report success")}}')
{
$('#'+vid+'_report-responses').html('<div class="alert alert-success alert-dismissable">{{ trans("main.embeds report success") }}<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button></div>')
}
else
{
console.log(data);
$('#'+vid+'_report-responses').html('<div class="alert alert-danger alert-dismissable">' + 'An error occurred while trying to report this link..' + '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button></div>')
}
},
error : function( xhr, err ) {
alert(err);
}
});
return false;
});
$('#input-'+vid).rateit('value', crating);
$('#input-'+vid).bind('rated', function(e){
var ri = $(this);
var value = ri.rateit('value');
ri.rateit('readonly', true);
$.ajax({
url : '{{ url('/links/rateLink/') }}',
type : 'GET',
data : {id: id, value: value},
beforeSend: function()
{
$('#ajax-loading').show();
},
success : function( data ) {
console.log(data);
},
error : function( xhr, err ) {
alert(err);
ri.rateit('readonly', false);
}
});
});
container.style.display = 'block';
return false;
}
</script>
And here part of the html
<div id="93_container" style="display:none">
<div class="embed-container" id="93_embed">
</div>
<div class="rateit" style="margin: 12px 0px;" id="input-93" data-rateit-min="0" data-rateit-max="10" data-rateit-step="0.5" data-rateit-value="1">
Rate Link
</div>
<a style="float: right; color: white;" href="javascript:void(0);" onclick="toggleDiv('93');" title="Hide View" class="btn btn-default no-bord-left"><i class="fa fa-minus-square"></i> Hide View</a>
<form method="POST" action="http://varmium.com/links/reportLink/%7Bid%7D" accept-charset="UTF-8" id="93_linkform" style="color: white; margin: 2px; float: right">
<input name="_token" type="hidden" value="cQQjBjZpmhefNxqWgeL7z5w4L9IMAUExSIMxX99P">
<a href="http://varmium.com/login" title="Bad Link" class="btn btn-default no-bord-left"><i class="fa fa-trash-o"></i> Bad Link</a>
</div>
<div class="row responses" id="93_report-responses" style="clear: both;">
</div>
<p>
</p>
<span class="row grey-out">
Release Date: 2014-04-06
</span>
</div>
</div>
<hr>
<div class="media col-sm-12">
<div class="pull-left col-sm-3">
<img src="http://image.tmdb.org/t/p/w300/oGkDVdlPewF60qwKfWfyhWTXL5f.jpg" alt="Poster of The Lion and the Rose" class="media-object img-responsive thumb">
</div>
<div class="media-body col-sm-9">
<style>
.embed-container { position: relative; clear:both; padding-bottom: 56.25%; padding-top: 30px; height: 100%; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class="links-section">
<h3>
View
</h3>
<dt style="float: left;">
Link:
</dt>
<dd style="color: black;">
<a href="javascript:void(0)" onclick="showFrame('x3Ciframex20widthx3Dx22640x22x20heightx3Dx22360x22x20frameborderx3Dx220x22x20scrollingx3Dx22NOx22x20marginheightx3Dx220x22x20marginwidthx3Dx220x22x20srcx3Dx22httpx3Ax2Fx2Fvodlockerx2Ecomx2Fembedx2Dwqploakgu4sjx2D640x360x2Ehtmlx22x3Ex0Dx0Ax20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x3Cx2Fiframex3E', 255, 94,10); return false;">http://vodlocker.com</a>
<span class="quality">
<i class="fa fa-signal">
</i>
</span>
HD
<span class="language">
<i class="fa fa-flag">
</i>
</span>
<span class="rating">
<i class="fa fa-star">
</i>
</span>
10
</dd>
<dt style="float: left;">
Link:
</dt>
<dd style="color: black;">
<a href="javascript:void(0)" onclick="showFrame('x3Ciframex20widthx3Dx22640x22x20heightx3Dx22360x22x20frameborderx3Dx220x22x20scrollingx3Dx22NOx22x20marginheightx3Dx220x22x20marginwidthx3Dx220x22x20srcx3Dx22httpx3Ax2Fx2Fplayedx2Etox2Fembedx2Dtkzyscs3q4drx2D640x360x2Ehtmlx22x3Ex0Dx0Ax20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x3Cx2Fiframex3E', 256, 94,10); return false;">http://played.to</a>
<span class="quality">
<i class="fa fa-signal">
</i>
</span>
HD
<span class="language">
<i class="fa fa-flag">
</i>
</span>
<span class="rating">
<i class="fa fa-star">
</i>
</span>
10
</dd>
<dt style="float: left;">
Link:
</dt>
<dd style="color: black;">
<a href="javascript:void(0)" onclick="showFrame('x3Ciframex20widthx3Dx22910x22x20heightx3Dx22425x22x20frameborderx3Dx220x22x20scrollingx3Dx22NOx22x20marginheightx3Dx220x22x20marginwidthx3Dx220x22x20srcx3Dx22httpx3Ax2Fx2Fthefilex2Emex2Fembedx2D1ojtp8mmg9y3x2D910x405x2Ehtmlx22x3Ex0Dx0Ax20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x20x3Cx2Fiframex3E', 257, 94,10); return false;">http://thefile.me</a>
<span class="quality">
<i class="fa fa-signal">
</i>
</span>
HD
<span class="language">
<i class="fa fa-flag">
</i>
</span>
<span class="rating">
<i class="fa fa-star">
</i>
</span>
10
</dd>
</div>
<div id="94_container" style="display:none">
<div class="embed-container" id="94_embed">
</div>
<div class="rateit" style="margin: 12px 0px;" id="input-94" data-rateit-min="0" data-rateit-max="10" data-rateit-step="0.5" data-rateit-value="1">
Rate Link
</div>
<a style="float: right; color: white;" href="javascript:void(0);" onclick="toggleDiv('94');" title="Hide View" class="btn btn-default no-bord-left"><i class="fa fa-minus-square"></i> Hide View</a>
<form method="POST" action="http://varmium.com/links/reportLink/%7Bid%7D" accept-charset="UTF-8" id="94_linkform" style="color: white; margin: 2px; float: right">
<input name="_token" type="hidden" value="cQQjBjZpmhefNxqWgeL7z5w4L9IMAUExSIMxX99P">
<a href="http://varmium.com/login" title="Bad Link" class="btn btn-default no-bord-left"><i class="fa fa-trash-o"></i> Bad Link</a>
</div>
<div class="row responses" id="94_report-responses" style="clear: both;">
</div>
<p>
</p>
<span class="row grey-out">
Release Date: 2014-04-13
</span>
</div>
</div>
<hr>
<div class="media col-sm-12">
<div class="pull-left col-sm-3">
<img src="http://image.tmdb.org/t/p/w300/2FHwJZA82xHGMZE15Uq7IvW9grJ.jpg" alt="Poster of Breaker of Chains" class="media-object img-responsive thumb">
</div>
解决方案
Your HTML is invalid (no closing form tags). When is doubt paste your HTML into JSFiddle and look for any red-highlighted elements.
As the ID'ed elements are forms it is having problems with the page.
If you close the first form element the second one is found fine.
这篇关于getElementById 仅返回第一个元素的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
