Funzione JS che mostra/nasconde bottoni

[hopeway]

Salve, avrei un problema. In pratica devo creare due bottoni: start e stop. In pratica alla pressione di start stop scompare e viceversa. Stop inizialmente è comunque nascosto. Tuttavia non capisco perché non funzioni (nonostante ieri funzionasse perfettamente, non ho idea di cosa aver combinato). Ho tentato prima utilizzando due funzioni e poi una sola ma nessuna delle 3 funziona

functionrecording_start(){    document.getElementById('start').classList.add('hide')
    document.getElementById('stop').classList.add('show');
}

function recording_stop(){
    document.getElementById('stop').classList.remove('show');
    document.getElementById('start').classList.remove('hide');
    
}

function myFunctionRecording() {
    var x = document.getElementById("start");
    var y = document.getElementById("stop");
    if (x.style.display === "block") {
        x.style.display = "none";
        y.style.display = "block";
    }
    if (y.style.display === "block"){
        x.style.display="block";
        y.style.display="none";
    }
    
}

Qualcuno potrebbe darmi una mano? inoltre nel css di pulsante-stop ho utilizzato come parametro display : none (hide non funziona), sbaglio qui? grazie mille anticipatamente

[hopeway]

Alla fine ho risolto, tuttavia ho problemi quando cerco di creare una funzione che debba controllare se all'interno di un input type text la stringa sia vuota, se sì quando premo start stampa un alert e non mi cambia i bottoni. inoltre non capisco se dovrei metterla all'interno dell'input type o della funzione di start. Condivido intanto i codici funzionanti (ho inserito display: none nel css del pulsante di stop:

function recording_start(){
    document.getElementById('start').classList.add('hide')
    document.getElementById('stop').classList.add('show');
}

function recording_stop(){
    document.getElementById('stop').classList.remove('show');
    document.getElementById('start').classList.remove('hide');
    
}