Почему этот скрипт работает только один раз? Заменяет элемент только один раз, а затем никогда больше

Question

У меня есть головоломка здесь, и это может быть просто ограничением JS, но вот код, и он работает ONCE. Тогда ... никогда больше. Не знаю, почему.

Он в основном заменяет содержимое TD кодом, установленным в каждом вызове JS. Начальная таблица настроена так, чтобы просто открыть канал потока с устройства через IP через подключаемый модуль VLC. Когда страница загружается, код по умолчанию работает нормально в таблице.

Затем, когда я нажимаю на кнопку, она меняет местами из правильного кода, новый поток выстреливает, а затем он никогда не работает снова: (...

не кажется, что ничего удивительно трудно обрабатывать все же, Я, видимо, не хватает чего-то или, возможно, некоторые знания ограничений?

Спасибо за любой проницательности.

Blockquote

<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/> 

Blockquote

Answer 1

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()} 
    }); 

Answer 2

Найди его!

Мне нужно включить <TD id="TABLENAME"> и закрыть </TD> в объявлениях var str! Когда он менялся, он удалял TD. Поместите их обратно, и оригинальный код отлично работает.

Спасибо за отладочную помощь!