Question

我正在尝试使用内部HTML JS创建博客，以便在单击按钮时将其余内容显示给用户。我尝试使用此代码使其工作，并且代码就像对其他项目一样工作，但是由于某些原因，它禁用了按钮，因此不起作用。任何帮助将不胜感激。

这是我的代码（我确定我已正确导入了每个文件，因为我在出现故障时这样做了）

var secret = document.getElementById("secret");
var readMore = document.getElementById("sth");
readMore.addEventListener("click", shareSecret);

function shareSecret() {
  secret.innerHTML =
    "The truth? There is no secret to happiness. We are all doomed to die a miserable death and live a life with depression before doing so. If anyone knows how to be happy, it sure isn't me.";
}

<div class="morecontent">
  <p id="secret">
    Click the button below to see the secret...
  </p>
</div>
<button id="sth">Read More</button>

Answer 1

在您的shareSecret（）函数中添加readMore.disabled=true;。

编辑：如果以后单击添加readMore.style.display = 'none';

以后该按钮不再有用，则最好不显示任何内容

var secret = document.getElementById("secret");
var readMore = document.getElementById("sth");
readMore.addEventListener("click", shareSecret);

function shareSecret() {
  secret.innerHTML ="The truth? There is no secret to happiness. We are all doomed to die a miserable death and live a life with depression before doing so. If anyone knows how to be happy, it sure isn't me.";
  readMore.disabled=true;

}

<div class="morecontent">
  <p id="secret">
    Click the button below to see the secret...
  </p>
</div>
<button id="sth">Read More</button>

Answer 2

您的代码段中的代码正确无误。如果它在您的项目中不起作用，请检查语法，您可以省略一些字母或类似内容。如果该按钮禁用添加：

readmore.removeAttribute("disabled");

尝试使用innerHTML时如何解决按钮禁用问题？

2 个答案: