HTML 在使用 javascript 单击按钮时显示更多文本

Question

我想在我的所有页面中添加一个阅读更多按钮，但它不能正常工作。它最初显示所有文本，然后在它正常工作后单击它。有人可以告诉我我做错了什么吗？我也想知道如何格式化按钮的外观。

页面在这里 - https://ffe-dev.flowersforeveryone.co.za/sea-point-flower-delivery/

我在 HTML 中使用以下代码 -

    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 = "Read more"; 
        moreText.style.display = "none";
      } else {
        dots.style.display = "none";
        btnText.innerHTML = "Read less"; 
        moreText.style.display = "inline";
      }
    }

  .moretext{
      display: none;
    }

 <div class = "textcontainer">
    <br>
    <br>
    <H3> SHOW YOUR LOVE WITH FLOWERS </H3>
    <p>
    <br>
    When you send flowers, it’s a deeply personal gesture of affection, we realise this well. Receiving a gift of flowers is intensely memorable to someone, because it makes them feel very special and loved. Flowers For Everyone gives you the assurance that we get it right, every time.
    <br>
    <br>
    <span id="dots"></span><span id="more">
    We have a striking range of luxury flower bouquets freshly cut & hand-delivered across the Western Cape province; from Sea Point with its breathtaking sea views and trendy restaurants, to the Cape winelands and beyond, we put smiles to faces. 
    <br>
    <br>
    </span></p>
    </div>
    
    <button onclick="myFunction()" id="myBtn">More...</button>

  

Answer 1

您可以将 class="moretext"添加到您的跨度中，这样文本将像这样隐藏起来

<span id="more" class="moretext">

在css中添加floowing lines padding: 0; 边框:无；就像你的按钮一样

#myBtn
{
padding: 0;
border: none; like this
}

可以在这里找到答案 Remove border from buttons