javascript - Javascript button toggle not working on first click, only second click or more

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/

标签： javascriptbuttontoggle

Answer 1

Here is your updated fiddle

toggle button

Also you should avoid calling function on button element like this

onclick="toggle(this);"