时间戳

首页 > 解决方案 > 我的按钮在移动设备上不起作用，但在桌面上可以正常工作？

javascript - 我的按钮在移动设备上不起作用，但在桌面上可以正常工作？

问题描述

昨晚我发表了一篇关于将文本和按钮本身居中的帖子，我很高兴能得到很好的反馈来解决这个问题。现在我遇到了一个不同的问题，由于某种原因，该按钮无法在移动设备上运行？昨晚当我测试它时它工作正常，但是当我试图将它应用到另一个页面时它在移动设备上不起作用。该按钮出现在移动设备上，但单击它时不会执行任何操作。不过桌面上没有这样的问题，所以我有点困惑。我将在下面粘贴整个代码。

看看能不能帮到你

谢谢。`

<!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>

`

标签： javascripthtml

解决方案

您的 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

推荐阅读