getElementById gibt nur den Wert für das erste Element zurück

Question

Jun 09, 2014, 05:38 PM

getElementById gibt nur den Wert für das erste Element zurück

Ich habe ein Skript, das auf Anfrage für einige generierte Elemente aufgerufen wird und das angegebene Element anhand der ID auswählt. Das bizarre Problem ist, dass die Auswahl für das erste Element auf der Seite einwandfrei funktioniert, für jedes andere Element jedoch null zurückgibt. Woran könnte das liegen?

Hier ist das relevante 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">&times;</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">&times;</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>

Und hier ein Teil des 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('\x3Ciframe\x20width\x3D\x22640\x22\x20height\x3D\x22360\x22\x20frameborder\x3D\x220\x22\x20scrolling\x3D\x22NO\x22\x20marginheight\x3D\x220\x22\x20marginwidth\x3D\x220\x22\x20src\x3D\x22http\x3A\x2F\x2Fvodlocker\x2Ecom\x2Fembed\x2Dwqploakgu4sj\x2D640x360\x2Ehtml\x22\x3E\x0D\x0A\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x3C\x2Fiframe\x3E', 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('\x3Ciframe\x20width\x3D\x22640\x22\x20height\x3D\x22360\x22\x20frameborder\x3D\x220\x22\x20scrolling\x3D\x22NO\x22\x20marginheight\x3D\x220\x22\x20marginwidth\x3D\x220\x22\x20src\x3D\x22http\x3A\x2F\x2Fplayed\x2Eto\x2Fembed\x2Dtkzyscs3q4dr\x2D640x360\x2Ehtml\x22\x3E\x0D\x0A\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x3C\x2Fiframe\x3E', 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('\x3Ciframe\x20width\x3D\x22910\x22\x20height\x3D\x22425\x22\x20frameborder\x3D\x220\x22\x20scrolling\x3D\x22NO\x22\x20marginheight\x3D\x220\x22\x20marginwidth\x3D\x220\x22\x20src\x3D\x22http\x3A\x2F\x2Fthefile\x2Eme\x2Fembed\x2D1ojtp8mmg9y3\x2D910x405\x2Ehtml\x22\x3E\x0D\x0A\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x3C\x2Fiframe\x3E', 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>