昨晚我发表了一篇关于文本和按钮本身居中的帖子,我很高兴收到大量解决问题的反馈。现在,我遇到了另一个问题,由于某种原因,按钮无法在手机上运行吗?昨晚当我对其进行测试时,它运行良好,但是现在当我尝试将其应用到另一个页面时,它在移动设备上无法正常工作。该按钮出现在移动设备上,但单击后将不执行任何操作。但是在台式机上却没有这样的问题,所以我有点困惑。我将在下面粘贴整个代码。
看看是否有帮助,
谢谢。`
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more {display: none;}
</style>
</head>
<body>
<span id="dots"></span><span id="more" style=color:black;>Example Text</span></p>
<div style="text-align:center"> <button onclick="myFunction()" id="myBtn" style=color:white;background-color:black;>Lyrics</button></div>
<script>
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Lyrics";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "block";
moreText.style.textAlign = "center";
// btnText.parentElement.style.textAlign = "center";
}
}
</script>
</body>
</html>
`
答案 0 :(得分:1)
您的HTML存在一些问题,下面我将对其进行评论:
<span id="dots"></span>
<!-- no quotes in the style attribute -->
<span id="more" style=color:black;>Example Text</span>
<!-- closing inexistent p tag -->
</p>
<div style="text-align:center">
<!-- no quotes in the style attribute -->
<button onclick="myFunction()" id="myBtn" style=color:white;background-color:black;>Lyrics</button>
</div>
一旦解决了所有上述问题,我将提到它是bad practice to use onclick
,并且您应将Element.addEventListener
与click
事件一起使用,如下所示:
var btn = document.getElementById("myBtn")
btn.addEventListener("click", myFunction)