猿问

阅读更多按钮以显示成功付款消息的弹出窗口

我正在创建一个阅读更多按钮,但我的意图是当它被点击时,它应该显示一条弹出消息,说明已成功付款,然后显示该段落的其余部分。这是我的代码


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";

  }

}

<!DOCTYPE html>

<html>


<head>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <style>

    #more {

      display: none;

    }

  </style>

</head>


<body>

  <h2>Read More Read Less Button</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>

  <button onclick="myFunction()" id="myBtn">Read more</button>

</body>


</html>

在这里,阅读更多按钮效果很好,但我希望它在显示其余文本之前显示一条弹出消息,说明已收到成功付款。请协助


偶然的你
浏览 62回答 1
1回答

肥皂起泡泡

只需添加警报<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>#more {display: none;}</style></head><body><h2>Read More Read Less Button</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p><button onclick="myFunction()" id="myBtn">Read more</button><script>function myFunction() {&nbsp; alert("successful payment received ");&nbsp; var dots = document.getElementById("dots");&nbsp; var moreText = document.getElementById("more");&nbsp; var btnText = document.getElementById("myBtn");&nbsp; if (dots.style.display === "none") {&nbsp; &nbsp; dots.style.display = "inline";&nbsp; &nbsp; btnText.innerHTML = "Read more";&nbsp;&nbsp; &nbsp; moreText.style.display = "none";&nbsp; } else {&nbsp; &nbsp; dots.style.display = "none";&nbsp; &nbsp; btnText.innerHTML = "Read less";&nbsp;&nbsp; &nbsp; moreText.style.display = "inline";&nbsp; }}</script></body></html>
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答