如何在尝试使用 innerHTML 时修复按钮禁用问题？答案

【问题标题】：How can I fix button disabling while trying to use innerHTML?如何在尝试使用 innerHTML 时修复按钮禁用问题？
【发布时间】：2020-08-26 02:51:57
【问题描述】：

我正在尝试使用内部 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>

【问题讨论】：

我这里看没问题，转载还是可以点击Read More
按钮点击后，secret元素的innerHTML被设置，再次点击按钮后不会改变。该按钮没有禁用，只是因为单击后内容没有更改，因此更改不可见。

标签： javascript html blogs innerhtml

【解决方案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>

【讨论】：

【解决方案2】：

您的 sn-p 中的代码是正确的。如果它在您的项目中不起作用，请检查语法，您可以省略一些字母或类似的东西。如果按钮禁用添加：

readmore.removeAttribute("disabled");

【讨论】：