某些元素的显示样式为“block”时更改innerHTML

Question

我在此处有“幻灯片放映”，您可以通过单击进入下一张幻灯片。我想要有相同的按钮，但每个图像都有不同的文字。所以我试图在“mySlides”变量之一设置为block时改变“active”变量的innerHTML。 但它不会识别它..你能帮我吗？

// JavaScript Document 
 

 
var active = document.getElementById("active"), 
 
\t x = document.getElementsByClassName("mySlides"); 
 

 
var slideIndex = 1; 
 
\t showDivs(slideIndex); 
 

 
function plusDivs(n) { 
 
\t showDivs(slideIndex += n); 
 
} 
 

 
function currentDiv(n) { 
 
\t showDivs(slideIndex = n); 
 
} 
 

 
function showDivs(n) { 
 
\t var i, 
 
\t \t dots = document.getElementsByClassName("demo"); 
 
\t \t 
 
\t 
 
\t if (n > x.length) {slideIndex = 1; 
 
\t } 
 
\t 
 
\t if (n < 1) {slideIndex = x.length; 
 
\t } 
 
\t 
 
\t for (i = 0; i < x.length; i++) { 
 
\t \t x[i].style.display = "none"; 
 
\t } 
 
\t 
 
\t for (i = 0; i < dots.length; i++) { 
 
\t dots[i].className = dots[i].className.replace(" w3-white", ""); 
 
\t } 
 
\t 
 
\t x[slideIndex-1].style.display = "block"; 
 
\t dots[slideIndex-1].className += " w3-white"; 
 
} 
 

 

 
function visible() { 
 
\t 
 
\t if (x[0].style.display = "block") { 
 
\t \t active.innerHTML = "test"; 
 
\t } 
 
\t 
 
}

<div class="w3-content w3-display-container"> 
 
<div id ="slider-wrapper"> 
 
    <img id="img1" class="centerscreen mySlides slidepos fade" src="x.jpg" alt="picture1"> 
 
    <img id="img2" class="centerscreen mySlides slidepos fade" src="xy.jpg" alt="picture2"> 
 
    <img id="img3" class="centerscreen mySlides slidepos fade" src="xyz.jpg" alt="picture3"></div> 
 
    <div class="w3-center w3-container w3-section w3-large w3-text-white centerscreen badgepos"> 
 
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span> 
 
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span> 
 
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span> 
 
    </div> 
 
    \t <container id="buttons" class="centerscreen"> 
 
    <div id="navarrow-left" class="w3-left w3-hover-text-black btn" onclick="plusDivs(-1)">&#10094;</div> 
 
    <div id="navarrow-right" class="w3-right w3-hover-text-black btn" onclick="plusDivs(1)">&#10095;</div> 
 
\t </container> 
 
</div> 
 

 
<div id="active"> 
 
\t Centerbutton 
 
</div>

Answer 1

请检查下面

// JavaScript Document 
 

 

 
var pictureText = Array("Picture1", "Picture2", "Picture3", "Picture4"); 
 

 
var active = document.getElementById("active"), 
 
\t x = document.getElementsByClassName("mySlides"); 
 

 
var slideIndex = 1; 
 

 
showDivs(slideIndex); 
 

 
function plusDivs(n) { 
 
\t showDivs(slideIndex += n); 
 
} 
 

 
function currentDiv(n) { 
 
\t showDivs(slideIndex = n); 
 
} 
 

 
function showDivs(n) { 
 
\t var i, 
 
\t \t dots = document.getElementsByClassName("demo"); 
 
\t \t 
 
\t 
 
\t if (n > x.length) {slideIndex = 1; 
 
\t } 
 
\t 
 
\t if (n < 1) {slideIndex = x.length; 
 
\t } 
 
\t 
 
\t for (i = 0; i < x.length; i++) { 
 
\t \t x[i].style.display = "none"; 
 
\t } 
 
\t 
 
\t for (i = 0; i < dots.length; i++) { 
 
\t dots[i].className = dots[i].className.replace(" w3-white", ""); 
 
\t } 
 
\t 
 
\t x[slideIndex-1].style.display = "block"; 
 
\t dots[slideIndex-1].className += " w3-white"; 
 
    
 
    visible(slideIndex); 
 
} 
 

 

 
function visible(slideIndex) { 
 
    
 
    document.getElementById("img"+slideIndex).style.display = "none"; 
 
\t active.innerHTML = pictureText[slideIndex]; \t 
 
}

.navarrow-left{ 
 
    float: left; 
 
} 
 
.navarrow-right{ 
 
    float: right; 
 
}

<div class="w3-content w3-display-container"> 
 
<div id ="slider-wrapper"> 
 
    <img id="img1" class="centerscreen mySlides slidepos fade" src="x.jpg" alt="picture1"> 
 
    <img id="img2" class="centerscreen mySlides slidepos fade" src="xy.jpg" alt="picture2"> 
 
    <img id="img3" class="centerscreen mySlides slidepos fade" src="xyz.jpg" alt="picture3"></div> 
 
    <div class="w3-center w3-container w3-section w3-large w3-text-white centerscreen badgepos"> 
 
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span> 
 
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span> 
 
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span> 
 
    </div> 
 
    \t <container id="buttons" class="centerscreen"> 
 
    <div id="navarrow-left" class="w3-left w3-hover-text-black btn" onclick="plusDivs(-1)">&#10094;</div> 
 
    <div id="navarrow-right" class="w3-right w3-hover-text-black btn" onclick="plusDivs(1)">&#10095;</div> 
 
\t </container> 
 
</div> 
 

 
<div id="active"></div>