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

Question

我不确定这里发生了什么，但我的视频左上角有这个 javascript 切换按钮，我用它来交换视频嵌入源和更改隐藏式字幕从“cc on”到“cc off”再返回的切换文本...但它仅在初始单击后有效。我在这里错过了什么？

控制台在页面加载时显示“按钮未定义”，但我不确定哪里不对。

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>

脚本：

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

这是您更新后的 fiddle

toggle button

另外你应该避免像这样在按钮元素上调用函数

onclick="toggle(this);"

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

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

javascript

button

toggle