Javascript 按钮切换在第一次点击时不起作用，只有第二次点击或更多

Question

I'm not sure what's going on here, but I have this javascript toggle button on the top left of my video that I'm using to swap the video embed source and to change the closed captioning text of the toggle from "cc on" to "cc off" and back... but it only works after an initial click. What am I missing here?

Console shows a "Button not defined" on page load, but I'm not sure what isn't right.

HTML:

<div class="navbar">
  <button id="togglecc" value="OFF" onclick="toggle(this);">cc on</button>
</div>
<div id="player">
  <div id="la1-video-player" data-embed-id="87e859b2-5db8-4ad8-bac7-575c22288930"></div>
  <script type="application/javascript" src="https://control.livingasone.com/webplayer/loader.min.js"></script>
</div>

Script:

function toggle(button) {
  v = document.getElementById("togglecc");
  vp = document.getElementById("player");
  if (v.value == "ON") {
    v.value = "OFF";
    v.innerHTML = 'cc off';
    vp.innerHTML = '<div id="la1-video-player" data-embed-id="9257a531-25ce-48bd-821b-9335681c45d8"></'+'div>';var a=document.createElement("script");a.setAttribute("src","//control.livingasone.com/webplayer/loader.min.js");document.getElementById('player').appendChild(a);
  } else {
    v.value = "ON";
    v.innerHTML = 'cc on';
    vp.innerHTML = '<div id="la1-video-player" data-embed-id="87e859b2-5db8-4ad8-bac7-575c22288930"></'+'div>';var a=document.createElement("script");a.setAttribute("src","//control.livingasone.com/webplayer/loader.min.js");document.getElementById('player').appendChild(a);
  }
}

https://jsfiddle.net/milkboy31/tg02Lv4c/

Answer 1

Here is your updated fiddle

toggle button

Also you should avoid calling function on button element like this

onclick="toggle(this);"