我的按钮在移动设备上无法使用，但在桌面上却可以正常工作？
发布于2024-11-25 20:11 阅读(650) 评论(0) 点赞(17) 收藏(1)
我昨晚发了一篇关于将文本和按钮本身居中的帖子，我很高兴收到解决问题的反馈。现在我遇到了另一个问题，按钮出于某种原因无法在移动设备上使用？昨晚我测试时它工作正常，但刚才我尝试在另一个页面上应用它时，它在移动设备上不起作用。按钮出现在移动设备上，但点击它时不会执行任何操作。不过在桌面上没有这样的问题，所以我有点困惑。我将在下面粘贴整个代码。
看看你是否能帮忙，
谢谢。`
<!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>`
解决方案
你的 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>
一旦修复了上述所有问题，我会提到使用是一种不好的做法onclick，您应该像这样使用事件Element.addEventListener：click
var btn = document.getElementById("myBtn")
btn.addEventListener("click", myFunction)
综上所述，这是一个可以运行的 JSFiddle
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/537210/863befc8f915ce96fb3c/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力