为什么这个脚本只工作一次?只替换元素一次，然后再也不替换

Why is this script only working once? Replaces element only once, then never again

本文关键字：一次 替换 元素 再也不 然后 为什么 脚本 工作      更新时间：2023-09-26

我这里有一个谜题，这可能只是JS的一个限制，但这是代码，它只工作一次。然后从此不再。不知道为什么。

它基本上是用在每个JS调用中设置的代码替换TD内容。初始表的设置只是通过VLC插件从IP上的设备打开一个流通道。当页面加载时，默认代码在表中运行良好。

然后，当我点击一个按钮时，它会交换出正确的代码，新的流会启动，然后它就再也不能工作了：（…

似乎还没有什么令人惊讶的难以处理的事情，我显然错过了一些东西，或者可能错过了一些关于限制的知识？

感谢您的真知灼见。

区块报价

<table><tr><td id="TABLENAME">
<embed pluginspage="http://www.videolan.org"
            type="application/x-vlc-plugin"
            version="VideoLAN.VLCPlugin.2"
            id="srcVIDEO4"
            width="324"
            height="132"
            autoplay="yes" loop="no"
            target="rtsp://192.168.88.235:556/stream.sdp" />
</td></tr></table>
<script>
function display556VIDEO4(){
    var strVIDEO4 = '<embed pluginspage="http://www.videolan.org" '
            type="application'/x-vlc-plugin" '
            version="VideoLAN.VLCPlugin.2" '
            id="srcVIDEO4" '
            width="324" '
            height="132" '
            autoplay="yes" loop="no" '
            target="rtsp://192.168.88.235:556/stream.sdp" />';
    var tdElementVIDEO4 = document.getElementById('TABLENAME');
    var trElementVIDEO4 = tdElementVIDEO4.parentNode;
    trElementVIDEO4.removeChild(tdElementVIDEO4);
    trElementVIDEO4.innerHTML = strVIDEO4 + trElementVIDEO4.innerHTML;
}
function display557VIDEO4(){
    var strVIDEO4 = '<embed pluginspage="http://www.videolan.org" '
            type="application'/x-vlc-plugin" '
            version="VideoLAN.VLCPlugin.2" '
            id="srcVIDEO4" '
            width="324" '
            height="132" '
            autoplay="yes" loop="no" '
            target="rtsp://192.168.88.235:557/stream.sdp" />';
    var tdElementVIDEO4 = document.getElementById('TABLENAME');
    var trElementVIDEO4 = tdElementVIDEO4.parentNode;
    trElementVIDEO4.removeChild(tdElementVIDEO4);
    trElementVIDEO4.innerHTML = strVIDEO4 + trElementVIDEO4.innerHTML;
}
function display558VIDEO4(){
    var strVIDEO4 = '<embed pluginspage="http://www.videolan.org" '
            type="application'/x-vlc-plugin" '
            version="VideoLAN.VLCPlugin.2" '
            id="srcVIDEO4" '
            width="324" '
            height="132" '
            autoplay="yes" loop="no" '
            target="rtsp://192.168.88.235:558/stream.sdp" />';
    var tdElementVIDEO4 = document.getElementById('TABLENAME');
    var trElementVIDEO4 = tdElementVIDEO4.parentNode;
    trElementVIDEO4.removeChild(tdElementVIDEO4);
    trElementVIDEO4.innerHTML = strVIDEO4 + trElementVIDEO4.innerHTML;
}
function display559VIDEO4(){
    var strVIDEO4 = '<embed pluginspage="http://www.videolan.org" '
            type="application'/x-vlc-plugin" '
            version="VideoLAN.VLCPlugin.2" '
            id="srcVIDEO4" '
            width="324" '
            height="132" '
            autoplay="yes" loop="no" '
            target="rtsp://192.168.88.235:559/stream.sdp" />';
    var tdElementVIDEO4 = document.getElementById('TABLENAME');
    var trElementVIDEO4 = tdElementVIDEO4.parentNode;
    trElementVIDEO4.removeChild(tdElementVIDEO4);
    trElementVIDEO4.innerHTML = strVIDEO4 + trElementVIDEO4.innerHTML;
}
</script>
<button style="background-color:green" type="button" onclick="display556VIDEO4()">6</button>-
<button style="background-color:green" type="button" onclick="display557VIDEO4()">7</button>-
<button style="background-color:green" type="button" onclick="display558VIDEO4()">8</button>-
<button style="background-color:green" type="button" onclick="display559VIDEO4()">9</button><br/>

区块报价

function display558VIDEO4(){
    var strVIDEO4 = '<embed pluginspage="http://www.videolan.org" '
            type="application'/x-vlc-plugin" '
            version="VideoLAN.VLCPlugin.2" '
            id="srcVIDEO4" '
            width="324" '
            height="132" '
            autoplay="yes" loop="no" '
            target="rtsp://192.168.88.235:558/stream.sdp" />';
    var tdElementVIDEO4 = document.getElementById('TABLENAME');
    var trElementVIDEO4 = tdElementVIDEO4.parentNode;
    trElementVIDEO4.removeChild(tdElementVIDEO4);
    trElementVIDEO4.insertBefore(document.createRange().createContextualFragment(strVIDEO4),trElementVIDEO4.firstChild)
}

只需使用

trElementVIDEO4.insertBefore(document.createRange().createContextualFragment(strVIDEO4),trElementVIDEO4.firstChild)

而不是

trElementVIDEO4.innerHTML = strVIDEO4 + trElementVIDEO4.innerHTML;

在所有的脚本中

另外，不要将点击事件放在标记中，而是将它们保存在javascript 中

而不是

<button style="background-color:green" type="button" onclick="display556VIDEO4()">6</button>-
<button style="background-color:green" type="button" onclick="display557VIDEO4()">7</button>-
<button style="background-color:green" type="button" onclick="display558VIDEO4()">8</button>-
<button style="background-color:green" type="button" onclick="display559VIDEO4()">9</button><br/>

使用

 <button style="background-color:green" type="button" id= '556VIDEO4'>6</button>-
<button style="background-color:green" type="button" id= '557VIDEO4'>7</button>-
<button style="background-color:green" type="button" id= '558VIDEO4'>8</button>-
<button style="background-color:green" type="button" id= '559VIDEO4'>9</button><br/>

并在javascript中放置以下代码：

 document.addEventListener("click", function(e){
        if(e.target.tagName === 'BUTTON'){
        button = e.target;
        eval('display'+button.id+'()');//call display559VIDEO4()}
    });

找到了！

我需要在var str声明中包含<TD id="TABLENAME">和关闭</TD>！当它换掉时，它正在移除TD。把它们放回原处，原始代码就会非常有效。

感谢您的调试帮助！

相关文章：