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

Question

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

用户单击更新 HTML、更改 class 并添加 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>

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

任何帮助，将不胜感激

Answer 1

试试这个代码：

 function ChangeContent(checkbox) { var el = document.getElementsByClassName("schedule-agreement")[0]; (checkbox.checked)? el.innerText = "No SCHEDULE": el.innerText = "Yes SCHEDULE" }

 <div id="agreement"> <input type="checkbox" onchange="ChangeContent(this)"> I agree <div> <a href="#" class="schedule-agreement">SCHEDULE</a> </div> </div>

解释：

首先，在输入复选框中添加一个更改事件侦听器。 然后，每当它运行时，检查它是否被选中。 如果是，则将链接的innerText更改为“No SCHEDULE”，否则，将其更改为“Yes SCHEDULE”。

如果您需要使用按钮，那么我建议添加一个click事件侦听器（或onclick内联事件侦听器），并仅更改链接innerText - 而不是整个 HTML。

在这种情况下，这是一个单独的演示：

 var isChecked = false function ChangeContent() { isChecked =.(isChecked) if (isChecked) { document.getElementsByClassName("agree")[0].innerText = "✔️ I agree" document.getElementsByClassName("schedule-agreement")[0].innerText = "No SCHEDULE" } else { document.getElementsByClassName("agree")[0].innerText = "❌ I agree" document.getElementsByClassName("schedule-agreement")[0].innerText = "Yes SCHEDULE" } }

 <div id="agreement"> <button class="agree" onclick="ChangeContent()">I agree</button> <div class="btn--no-schedule"> <a href="#" class="schedule-agreement">SCHEDULE</a> </div> </div>

Answer 2

这里有两个错误。

首先，重置协议的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>
        `;
    }
  };
}

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