javascript - 为什么 "Read More"按钮在 Div 中不起作用?

标签 javascript html css

我正在使用 divi 制作一个网站,我手动添加了一个不起作用的阅读更多按钮。请帮忙!

我使用了一个复杂的代码,我缩小了它的范围以完全匹配 w​​3school 的代码,但它仍然不起作用。

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";
  }
}
#more {display: none;}
<meta name="viewport" content="width=device-width, initial-scale=1">

<h3><em>Let me tell you a Story!!!!!</em></h3>
<p style="text-align: left;">Let us imagine a boy. A brilliant, hardworking and dedicated chap. Always thinking about how he is going to study everything, what more he’s going to learn today and how one day he’s going to change the world. Everyone got inspired when they see this gentleman. One day a person finds out that this extraordinary lad is deciding to leave <span id="dots">...</span><span id="more">
the college, just like a sapling deciding to quit sunlight. He was appalled at the possibility that the world will never see that immense potential realized. He digs deeper and discovers the most unfortunate situation. The boy’s father was an addict, his brothers were hardly supportive and he was barely able to pay his fee till now. And now the support was gone. He couldn’t pay the pence that kept the ball rolling and the wheels of the train to his future turning. Imagine being denied of oxygen of wisdom for your lungs, glucose of rationality for your brain and choir of knowledge in your veins.
<br>
Now imagine as 22 million children in our country are&nbsp; denied even primary education. The person wanted to help him but he couldn’t possibly pay that much money. He took the name of Allah and started asking for donations. He believed in the humankind and its potential for good. It wasn’t easy at first but soon enough he could see the power of drops becoming waves and waves becoming an ocean. He witnessed the power of collective good, the emergence of something greater than the constituents. He was humbled by the grace of God that day. The boy’s fee was paid but the<br>burning flame of service still remained.
<br>
<em><strong>That flame was the birth of Muaawin and that person was I, Muhammad Shaheer Farooq and the boy became a friend, not to mention a top student.</strong></em></p>
<button onclick="myFunction()" id="myBtn">Read more</button>

最佳答案

您插入的代码工作正常。

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more {display: none;}
</style>


<h3><em>Let me tell you a Story!!!!!</em></h3>
<p style="text-align: left;">Let us imagine a boy. A brilliant, hardworking and dedicated chap. Always thinking about how he is going to study everything, what more he’s going to learn today and how one day he’s going to change the world. Everyone got inspired when they see this gentleman. One day a person finds out that this extraordinary lad is deciding to leave <span id="dots">...</span><span id="more">
the college, just like a sapling deciding to quit sunlight. He was appalled at the possibility that the world will never see that immense potential realized. He digs deeper and discovers the most unfortunate situation. The boy’s father was an addict, his brothers were hardly supportive and he was barely able to pay his fee till now. And now the support was gone. He couldn’t pay the pence that kept the ball rolling and the wheels of the train to his future turning. Imagine being denied of oxygen of wisdom for your lungs, glucose of rationality for your brain and choir of knowledge in your veins.
<br>
Now imagine as 22 million children in our country are&nbsp; denied even primary education. The person wanted to help him but he couldn’t possibly pay that much money. He took the name of Allah and started asking for donations. He believed in the humankind and its potential for good. It wasn’t easy at first but soon enough he could see the power of drops becoming waves and waves becoming an ocean. He witnessed the power of collective good, the emergence of something greater than the constituents. He was humbled by the grace of God that day. The boy’s fee was paid but the<br>burning flame of service still remained.
<br>
<em><strong>That flame was the birth of Muaawin and that person was I, Muhammad Shaheer Farooq and the boy became a friend, not to mention a top student.</strong></em></p>
<button onclick="myFunction()" id="myBtn">Read more</button>
<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 = "Read more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; 
    moreText.style.display = "inline";
  }
}
</script>

关于javascript - 为什么 "Read More"按钮在 Div 中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57641217/

相关文章:

html - 是什么导致 HTML Popup 中的文本垂直对齐到底部?

php - 绘制锦标赛括号(基于 PHP 数据集的 CSS/HTML)

javascript - 动画发生时将图像保持在其位置

html - <div> 关闭后仍然有效

css - 我希望我的 ol 子弹看起来像 i) 使用 wordpress

javascript - 将事件处理程序分配给 for 循环中的每个按钮

Javascript:无法理解正则表达式的含义

html - 宽度/高度作为自动值强制为百分比?

javascript - 如何更新表单中表示的 JSON 对象

javascript - 取消 jQuery 中的 $ ('form' ).submit() 调用