如何更改点击事件的值并在同一底部的点击事件上再次更改值

Question

我正在尝试构建一个供我的朋友使用的聊天框，在朋友加入房间之前，我希望他们点击底部，其默认值为JoinChat。当他们点击我想要使用ajax向数据库发送请求以允许他们进入房间然后将底部的值更改为LeaveChat

假设他们已进入房间并且他们想离开房间，所以当他们点击同一个底部时，向数据库发送另一个请求以断开他们与聊天室的连接。

<input type="button" value="JoinChat" onClick="" id="btn">

Answer 1

以下是快速解决方案：

var isConnected = false;
var NOTCONNECTEDTEXT = 'JoinChat'
var CONNECTEDTEXT = 'LeaveChat'

function btnClick(event){
  isConnected = !isConnected
  
  document.querySelector('#btn').value = 
    isConnected ? CONNECTEDTEXT : NOTCONNECTEDTEXT
}

<input type="button" value="JoinChat" onClick="btnClick()" id="btn">

只需实现您需要的内容，但代码很糟糕，为了改进代码，建议您使用像React这样的库。