javascript - 为什么“阅读更多”按钮在 Div 中不起作用？

Question

我正在使用 divi 创建一个网站，并且我手动添加了一个不起作用的 READ MORE 按钮。请帮忙！

我使用了一个复杂的代码，我把它缩小到完全匹配 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>

标签： javascripthtmlcss

Answer 1

您插入的代码工作正常。

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