更改按钮ID后如何执行第二个javascript函数？

Question

我有一个html按钮，可在其中更改值和ID，以尝试根据新ID执行javascript函数。

从此；

<button id="Start" class="Button">Start</button>

对此；

<button id="Stop" class="Button">Stop</button>

目的是让用户单击“开始”按钮以执行关联的功能，并将现有按钮更改为“停止”按钮以执行其关联的功能。一键执行两个单独的任务。

var mySocket = new WebSocket("ws://192.168.1.102:5678/");
window.onload = function() {
    var StartST = document.getElementById('Start');
    var StopST = document.getElementById('Stop');
    var socketStatus = document.getElementById('usercontent');
    if (StartST) {
        StartST.addEventListener("click", function (e) {
            StartST.innerHTML = "Stop";
            StartST.id = "Stop";
            mySocket.send('start');
            socketStatus.insertAdjacentHTML('afterbegin','<div class="received">Start -> ' + StartST.id + '</div>\n');
            e.preventDefault();
        })
    }

    if (StopST) {
        StopST.addEventListener("click", function (e) {
            mySocket.send('stop');
            StopST.innerHTML = "Start";
            StopST.id = "Start";
            socketStatus.insertAdjacentHTML('afterbegin','<div class="received">Stop</div>\n');
            e.preventDefault();
        })
    }
};

问题是我无法执行“停止”按钮功能，而且不确定如何实现委派以使其正常工作。