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

Question

Newish to javascript, but I do't know why the below is not working. I am trying to use javascript to make a link become active after a button has become clicked.

The user clicks a button that updates the HTML, changes the class and adds a html link. The code works the first time -- the HTML is updated correctly. However if the user decides to un-click the button nothing happens.

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>

I also tried

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

but get a type error agree() is not a function.

Any help would be appreciated

Answer 1

Try this code:

 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>

Explanation:

First of all, add a change event listener to the input checkbox. Then, whenever it is run, check if it is checked. If it is, change the link's innerText to "No SCHEDULE", otherwise, change it to "Yes SCHEDULE".

If you need to use a button, then I would recommend adding a click event listener (or an onclick inline event listener), and changing the link innerText ONLY - not the whole HTML.

In that case, here's a separate demo:

 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

There are two errors here.

First, the click event is lost when you reset the agreement's innerHTML, second, agree.value is a string, and thus will never be "=== true".

There are multiple ways of fixing it. One way is changing the innerHTML part so the event isn't lost. Also, changing the condition to === 'true'

Like so:

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

Edit: I tried to alter your code as little as possible