How to I replace these two buttons with a text in Javascript-CodePudding

I have these two buttons ACCEPT/DECLINE friend request

How do I replace them with the text "You accepted X's friend request" if you click the Accept button and with the "You declined X's friend request" if you click on the Decline button? I know I should add an eventlistener to it.

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 >
  <div >
    <div >
      <img src="Content/request1.jpg" alt="" />
    </div>
    <div>
      <h5>Hajia Bintu</h5>
      <p >8 mutual friends</p>
    </div>
  </div>
  <div >
    <button  id="accept">Accept</button>
    <button  id="decline">Decline</button>
  </div>
</div>

CodePudding user response：

        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 >
        <div >
            <div >
                <img src="Content/request1.jpg" alt="" />
            </div>
            <div>
                <h5 id="friend">Hajia Bintu</h5>
                <p >8 mutual friends</p>

            </div>
        </div>
        <div >
            <button  id="accept">Accept</button>
            <button  id="decline">Decline</button>
        </div>
    </div>

CodePudding user response：

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 >
  <div >
    <div >
      <img src="Content/request1.jpg" alt="" />
    </div>
    <div>
      <h5>Hajia Bintu</h5>
      <p >8 mutual friends</p>
    </div>
  </div>
  <div >
    <button  id="accept">Accept</button>
    <button  id="decline">Decline</button>
  </div>
</div>