javascript - 当歌词可见时隐藏描述，反之亦然(和可能的错误？)

Question

下面是这个非常简单的片段。

当你运行它时，你可以看到专辑描述，如果你点击span，就会出现歌词，而描述消失。如果你再次点击它，你会看到我的问题:描述和歌词都变得可见，点击 span 之后什么都没有了。

但我想要实现的是让代码像那个错误(或其他任何东西)一样工作，如果歌词可见，则隐藏描述，如果描述可见，则隐藏歌词

我尝试了一些与其他 if 、 else if 或 else 语句的变体，也在 for 中尝试了一些东西 循环，但我无法让它工作。

我怎样才能做到这一点？

function showlyrics(){
    document.getElementById("albuminfo").style.display="none";
    var lyrics=document.getElementById("songlyrics");
    lyrics.style.display = (lyrics.style.display === 'block' ? 'none' : 'block');

    if(lyrics.style.display==="none"){
        document.getElementById("albuminfo").style.display="block";
        //whatever;
    
    //If I write anything after setting albuminfo a block display (UNCOMMENT "whatever;" TO SEE) and I close it, it's actually working as I want it, but I have no idea why, if you could explain this too, I'd appriciate it
        
    }
    //I don't know if this part is necessarry, so I'll just leave it here
    var hideotherlyrics = document.getElementsByClassName("lyrics");
var i;
for (i = 0; i < hideotherlyrics.length; i++) {
    hideotherlyrics[i].style.display = "none";
    document.getElementById("songlyrics").style.display="blocK";
}
}

#starslyrics{
    position:absolute;
    top:3%;
    right:40%;
  font-size:25px;
  font-weight:bold;
    
}

.hover:hover,.hover a:hover{
    border-radius:5px;
    border:none;
    cursor:pointer;
    background-color:red;
    color:white;
}
.lyrics{
    display:none;
    position:relative;
  margin-top:50px;
    font-size:18px;
}


#albuminfo{
    text-align:justify;
    width:400px;
    font-size:18px;
  margin-top:50px;
}

<div id="lyrics">
<p id="albuminfo">

THIS IS THE <strong>ALBUM DESCRIPTION</strong><br><br> IF THIS IS VISIBLE, THE SONG LYRICS SHOULDN'T BE

</p>
<p class="lyrics" id="songlyrics">
THIS IS THE <strong>SONG LYRICS</strong><br><br> IF THIS IS VISIBLE, THE ALBUM DESCRIPTION SHOULDN'T BE

</p>

<span  class="hover" onclick="showlyrics()" id="starslyrics">Click here</span>
</div>

Answer 1

您应该在 showlyrics() 函数之外定义和设置初始值。否则，它们不会存储显示状态，每次您单击该功能时，它都会重置之前的状态。

var description = document.getElementById("albuminfo");
var lyrics = document.getElementById("songlyrics");

description.style.display = "none";
lyrics.style.display = "block";

function showlyrics(){
	if(lyrics.style.display === "block"){
	    description.style.display = "block";	
            lyrics.style.display = "none";
	} else {
            description.style.display = "none";	
            lyrics.style.display = "block";
        }
}

#starslyrics{
	position:absolute;
	top:3%;
	right:40%;
  font-size:25px;
  font-weight:bold;
	
}

.hover:hover,.hover a:hover{
	border-radius:5px;
	border:none;
	cursor:pointer;
	background-color:red;
	color:white;
}
.lyrics{
	display:none;
	position:relative;
  margin-top:50px;
	font-size:18px;
}


#albuminfo{
	text-align:justify;
	width:400px;
	font-size:18px;
  margin-top:50px;
}

<div id="lyrics">
<p id="albuminfo">

THIS IS THE <strong>ALBUM DESCRIPTION</strong><br><br> IF THIS IS VISIBLE, THE SONG LYRICS SHOULDN'T BE

</p>
<p class="lyrics" id="songlyrics">
THIS IS THE <strong>SONG LYRICS</strong><br><br> IF THIS IS VISIBLE, THE ALBUM DESCRIPTION SHOULDN'T BE

</p>

<span  class="hover" onclick="showlyrics()" id="starslyrics">Click here</span>
</div>