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

編輯：我試圖盡可能少地改變你的代碼