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> `
    }
  }
};

函数agree（）{
let agreement=document.getElementById（“协议”）；
let agree=document.getElementById（“agree”）；
agree.onclick=（）=>{
如果（agree.value==true）{
agreement.innerHTML=`
我同意
`
}否则{
agreement.innerHTML=`
我同意
`
}
}
};

HTML

我同意

我也试过了

但是获取类型错误agree（）不是函数

任何帮助都将不胜感激

请尝试以下代码：

函数更改内容（复选框）{
var el=document.getElementsByClassName（“计划协议”）[0]；
（复选框。选中）？el.innerText=“无计划”：el.innerText=“是计划”
}

我同意

尝试以下代码：

函数更改内容（复选框）{
var el=document.getElementsByClassName（“计划协议”）[0]；
（复选框。选中）？el.innerText=“无计划”：el.innerText=“是计划”
}

我同意

这里有两个错误

首先，重置协议的innerHTML时，单击事件将丢失，其次，

同意。值

是字符串，因此永远不会为“==true”

有多种方法可以解决这个问题。一种方法是更改innerHTML部分，这样事件就不会丢失。另外，将条件更改为

='true'

像这样：

HTML:

我同意

JS:

函数agree（）{
const agreeBtn=document.getElementById（“agree”）；
const scheduleBtn=document.getElementById（“scheduleBtn”）；
agreeBtn.onclick=（）=>{
如果（agreeBtn.value==“true”）{
agreeBtn.value=false；
scheduleBtn.innerHTML=`
`;
}否则{
agreeBtn.value=true；
scheduleBtn.innerHTML=`
`;
}
};
}

---

编辑：我试图尽可能少地修改您的代码

这里有两个错误

首先，重置协议的innerHTML时，单击事件将丢失，其次，

同意。值

是字符串，因此永远不会为“==true”

有多种方法可以解决这个问题。一种方法是更改innerHTML部分，这样事件就不会丢失。另外，将条件更改为

='true'

像这样：

HTML:

我同意

JS:

函数agree（）{
const agreeBtn=document.getElementById（“agree”）；
const scheduleBtn=document.getElementById（“scheduleBtn”）；
agreeBtn.onclick=（）=>{
如果（agreeBtn.value==“true”）{
agreeBtn.value=false；
scheduleBtn.innerHTML=`
`;
}否则{
agreeBtn.value=true；
scheduleBtn.innerHTML=`
`;
}
};
}

---

编辑：我试图尽可能少地修改您的代码

您可以尝试使用

onmouseup

事件。您可以尝试使用

onmouseup

事件。

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

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

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>
        `;
    }
  };
}