如何用Javascript中的文本替換這兩個按鈕-有解無憂

我有這兩個按鈕 ACCEPT/DECLINE 好友請求

如果單擊“接受”按鈕，如何將它們替換為文本“您接受 X 的好友請求”，如果單擊“拒絕”按鈕，如何將它們替換為“您拒絕 X 的好友請求”？我知道我應該給它添加一個事件監聽器。

const acceptRequest = document.getElementById('accept');
const declineRequest = document.getElementById('decline');
const actionsRequest = document.getElementsByClassName('action')

acceptRequest.addEventListener('click', () => {
  actionsRequest.style.display = 'none';
  this.value = 'X accepted your request';
})

<div class="request">
  <div class="info">
    <div class="profile-photo">
      <img src="Content/request1.jpg" alt="" />
    </div>
    <div>
      <h5>Hajia Bintu</h5>
      <p class="text-muted">8 mutual friends</p>
    </div>
  </div>
  <div class="action">
    <button class="btn btn-primary" id="accept">Accept</button>
    <button class="btn" id="decline">Decline</button>
  </div>
</div>

uj5u.com熱心網友回復：

        let accept = document.getElementById("accept");
        let decline = document.getElementById("decline");
        let name = document.getElementById("friend").innerHTML;

        accept.onclick = () => {
            accept.innerHTML = "You accept "   name   " friend request";
            decline.innerHTML = "Decline";
        }

        decline.onclick = () => {
            decline.innerHTML = "You decline "   name   " friend request";
            accept.innerHTML = "Accept";
        }

    <div class="request">
        <div class="info">
            <div class="profile-photo">
                <img src="Content/request1.jpg" alt="" />
            </div>
            <div>
                <h5 id="friend">Hajia Bintu</h5>
                <p class="text-muted">8 mutual friends</p>

            </div>
        </div>
        <div class="action">
            <button class="btn btn-primary" id="accept">Accept</button>
            <button class="btn" id="decline">Decline</button>
        </div>
    </div>

uj5u.com熱心網友回復：

const acceptRequest = document.getElementById('accept');
const declineRequest = document.getElementById('decline');
const actionsRequest = document.getElementsByClassName('action')[0]

acceptRequest.addEventListener('click', () => {
  actionsRequest.style.display = 'none';
  this.value = 'X accepted your request';
})

<div class="request">
  <div class="info">
    <div class="profile-photo">
      <img src="Content/request1.jpg" alt="" />
    </div>
    <div>
      <h5>Hajia Bintu</h5>
      <p class="text-muted">8 mutual friends</p>
    </div>
  </div>
  <div class="action">
    <button class="btn btn-primary" id="accept">Accept</button>
    <button class="btn" id="decline">Decline</button>
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/506853.html

標籤：javascript 功能添加事件监听器

上一篇：為什么我的代碼回傳第二個“匹配無”行？

下一篇：定義和評估遞減冪函式