时间戳

首页 > 解决方案 > Javascript没有取消单击带有链接的按钮

javascript - Javascript没有取消单击带有链接的按钮

问题描述

对 javascript 很陌生，但我不知道为什么下面的内容不起作用。我正在尝试使用 javascript 在单击按钮后使链接变为活动状态。

用户单击更新 HTML、更改类并添加 html 链接的按钮。代码第一次运行——HTML 被正确更新。但是，如果用户决定取消单击该按钮，则不会发生任何事情。

Javascript：

function agree() {
  let agreement = document.getElementById("agreement");
  let agree = document.getElementById("agree");

  agree.onclick = () => {
    if (agree.value === true) {
      agreement.innerHTML = `
             <button id="agree" class="agree--no" value="false"></button>I agree
                  <div class="btn--no-schedule">
                    <a href="#" > No SCHEDULE  </a>
                </div> `
    } else {
        agreement.innerHTML = `
            <button id="agree" class="agree--checked" value="true"><i class="fas fa-lg fa-check-square"></i></button>I agree
          <div class="btn--agree-schedule">
                <a href="http://google.com" > yes SCHEDULE  </a>
       </div> `
    }
  }
};

HTML

<div id="agreement">
  <button id="agree" class="agree--no" value="false"></button>I agree
    <div class="btn--no-schedule">
      <a href="#" > SCHEDULE  </a>
    </div>
</div>

我也试过

<button onclick=“agree();” id="agree" class="agree--no" value="false"></button>

但是得到一个类型错误同意（）不是一个函数。

任何帮助，将不胜感激

标签： javascript

解决方案

这里有两个错误。

首先，当您重置协议的innerHTML时，单击事件会丢失，其次，agree.value是一个字符串，因此永远不会是“=== true”。

有多种修复方法。一种方法是更改​​ innerHTML 部分，这样事件就不会丢失。此外，将条件更改为=== 'true'

像这样：

HTML：

<div id="agreement">
  <button id="agree" class="agree--no" value="false"></button>I agree
    <div id="schedule-btn" class="btn--no-schedule">
      <a href="#" > SCHEDULE  </a>
    </div>
</div>

JS：

function agree() {
  const agreeBtn = document.getElementById("agree");
  const scheduleBtn = document.getElementById("schedule-btn");

  agreeBtn.onclick = () => {
    if (agreeBtn.value === "true") {
      agreeBtn.value = false;
      scheduleBtn.innerHTML = `
          <div class="btn--no-schedule">
            <a href="#" > No SCHEDULE  </a>
          </div>
        `;
    } else {
      agreeBtn.value = true;
      scheduleBtn.innerHTML = `
          <div class="btn--agree-schedule">
            <a href="http://google.com" > yes SCHEDULE  </a>
          </div>
        `;
    }
  };
}

编辑：我试图尽可能少地改变你的代码

推荐阅读