How to replace a script fragment in a div using GetElementById?

Question

JavaScript

There is a JS player in which you need to change the link to the video. Looks like that:

<div id="playera"></div>
<div id="player">
    <%= javascript_tag do %>
        new Playerjs({
        "id":"playera",
        "file": "<%= "#{@video.link_video1}" %>"
        });
    <% end %>
</div>

There is also a selector in which we select the link to the video:

<select id="slct3" name="slct3" onchange="funlink(this.id,'player')">
  <option value="Ссылка 1">Ссылка на видео 1</option>
  <option value="Ссылка 2">Ссылка на видео 2</option>
  <option value="Ссылка 3">Ссылка на видео 3</option>
</select>
# <div id="linkurl">Ссылка на видео</div>

Script to change the link with a selector:

function funlink(s1,s2){
  var s1 = document.getElementById(s1);
  var s2 = document.getElementById(s2);
  s2.innerHTML = "";
  if(s1.value == "Озвучка 1"){
    s2.innerHTML = "@video.link_video1";
  } else if(s1.value == "Озвучка 2"){
    s2.innerHTML = "@video.link_video2";
  } else if(s1.value == "Озвучка 3"){
    s2.innerHTML = "@video.link_video3";
  }
  }

Now the question is:
Since I can't figure out how exactly you can replace part of the line in the player script, namely
"file": "<%= "#{@video.link_video1}" %>"
since the DOM element is identified by ID, that is, the contents of the entire DIV will change,
then I admit the option of replacing the entire contents of the DIV.
In this case, I run into a problem, since this div contains the script tags and the script itself.
I planned to put the generated code for each link into methods where the content of the div was collected along with a new link to the video, but I don’t know how to write it correctly.
It 's elementary, even if you just write tags in the view, it is displayed incorrectly, even if you use it: it turns out garbage.<script></script>
"\<script\>\</script\>"
Maybe I'm missing something a lot somewhere.
I would like someone to suggest a solution or at least direct me where to dig.
I work in the RubyOnRails framework.

Answer 1

In general, I chose the direction, but I ask you to tell me, since I am not strong in JS.

<div id="playera"></div>
<div id="player">
    <%= javascript_tag do %>
    // Объявляю переменную, которая принимает содержимое ДИВа, куда я генерирую ссылку на видео
     var content=document.getElementById("linkurl").innerHTML
        new Playerjs({
        "id":"playera",
        // Теперь как мне вывести значение переменной CONTENT? Если пишу CONTENT, то в HTML и отображается content, а мне нужно именно значение, которое присвоил.
        "file": "content"
        });
    <% end %>
</div>

Answer 2

It seems to me that I understand the essence of the problem, but I don’t know Ruby on Rails at all, so ... in which case everything below is pseudocode :D
On the case: if you replace part of the line in the player script, then nothing will happen, because by that time this code will have long ago been compiled and executed by the browser.
Start simple - create a property in the global context and write a reference to the instance there. Then, in the function that handles the change in the select value, call the player API and start another video. All together it will look something like this:

<div id="player-wrapper"></div>

<%= javascript_tag do %>
  var player = new Playerjs({
    id:"player-wrapper",
    file: "<%= @video.link_video1 %>"
  });
<% end %>

<select value="<%= @video.link_video1 %>" onchange="player.api('play', this.value)">
  <option value="<%= @video.link_video1 %>">Ссылка на видео 1</option>
  <option value="<%= @video.link_video2 %>">Ссылка на видео 2</option>
  <option value="<%= @video.link_video3 %>">Ссылка на видео 3</option>
</select>

Once this is up and running, you can think about how to take JS out of the markup, remove global variables, etc.