Question

点击按钮时我正在尝试更改文字。该按钮是用div创建的：

<nav class="retour white"><a href="photos.html">Retour</a></nav>

<div class="pause" id="pause" onclick="playpause()"><a href="#">Pause</a></div>
<video autoplay id="bgvid" loop>
    <source src="videos/chat/chat_noir.mp4" type="video/mp4">
</video>

我的功能：

function playpause(){

    var video = document.getElementById("bgvid");
    var pauseText = document.getElementById("pause");

    if (video.paused){
        video.play();
        pauseText.innerHTML = "Pause";
    } else {
        video.pause();
        pauseText.innerHTML = "Jouer";
    }

}

我的CSS：

 .retour{
width:100%;
height: 50px;
text-align:center;
position:fixed;
z-index: 2;
top: 0px;
background-color:rgba(0,0,0,0.6);
}
.retour a {
color: inherit;
text-decoration: none;
position: relative;
top: 50%;
padding:14px;
display:inline-block;
transform: translateY(-50%);
}

/****** VIDEOS  ******/

video { 
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background: url('') no-repeat;
background-size: cover;
transition: 1s opacity;
}

.white{
background-color: rgba(255,255,255, 0.6) !important;
}
.pause{
width:80px;
height: 50px;
text-align:center;
position:fixed;
z-index: 2;
top: 0px;
right:0px;
background-color: rgba(255,255,255, 0.6);
}
.pause a {
color: inherit;
text-decoration: none;
position: relative;
top: 50%;
padding:14px;
display:inline-block;
transform: translateY(-50%);
}

所以我可以更改文本，但它删除了a标记并删除了我的样式。我试着添加

document.getElementById("pause").getElementsByTagName("a")

但它不起作用。

Answer 1

你有：

<div class="pause" id="pause" onclick="playpause()"><a href="#">Pause</a></div>

因为您拥有此功能，所以当您稍后设置innerHTML的{{1}}时，链接会消失。

要纠正您的问题并防止div消失，您需要获得正确的DOM引用：

接下来，不要使用内联HTML事件处理程序，因为它们会创建意大利面条代码并导致事件代码周围的全局事件处理包装函数。如果您的代码使用了这些包装器，则会更改var anchor= document.querySelector("#pause > a");的绑定。

以下是如何连接到使用W3C DOM标准的事件处理程序：

this

Amd，请注意我在顶部显示的window.addEventListener("DOMContentLoaded", function(){ var video = document.getElementById("bgvid"); var pauseText = document.getElementById("pause"); var anchor= document.querySelector("#pause > a"); pauseText.addEventListener("click", function(){ if (video.paused){ video.play(); anchor.innerHTML = "Pause"; } else { video.pause(); anchor.innerHTML = "Jouer"; } }); });代码 - 它不再具有其中div。

Answer 2

这应该有用。

document.getElementById("pause").onclick = function(){

  var video = document.getElementById("bgvid");
  var pauseText = document.querySelector("#pause a");

  if (video.paused){
      video.play();
      pauseText.innerHTML = "Pause";
  }else{
      video.pause();
      pauseText.innerHTML = "Jouer";
  }


}

<!-- Got video from http://www.w3schools.com/ -->
<video width="400" id="bgvid">
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>


<div class="pause" id="pause"><a href="#">Pause</a></div>

Answer 3

您可以使用firstElementChild pause元素。我猜问题是标签被移除

所以我可以更改文本，但它删除了一个标记并删除了我的样式

function playpause(){

var video = document.getElementById("bgvid");
var pauseText = document.getElementById("pause").firstElementChild;

if (video.paused){
    video.play();
    pauseText.innerHTML = "Pause";
} else {
    video.pause();
    pauseText.innerHTML = "Jouer";
}

}

Answer 4

你必须使用它：

function playpause() {
    document.getElementById("pause").innerHTML = "Jouer";
}

<div class="pause" id="pause" onclick="playpause()"><a href="#">Pause</a></div>

更改标签内的文本onclick

4 个答案: