Ajuda no desafio 5 - Githubissues

Ola pessoal. Segue o trecho com problema do código:

<h1 id="tit">Conversor de medidas</h1>
<input type="button" value="Converter" id="but" onclick="clicar()">
<p>Clique no botão para inicar</p>
<script>
    function clicar(){
        m=window.prompt('Digite uma distância em metros: ')
        Number(m)
        titulo = document.getElementById('tit')
        botao=document.getElementById('but')
        window.document.write(titulo.innerHTML+'<br>')
        window.document.write(`${m/1000} quilômetros (Km) <br>`)
        window.document.write(`${m/100} hectômetros (Hm)<br>`)
        window.document.write(`${m/10} decâmetros (Dam)<br>`)
        window.document.write(`${m*10} decímetros (dm)<br>`)
        window.document.write(`${m*100} centímetros (cm)<br>`)
        window.document.write(`${m*1000} milímetros (mm)<br>`)
    }
</script>

O que acontece é que ao clicar no botão criado sou levado a outra página. Portanto, tive de escrever 'Conversor de medidas' novamente, para isso usei ###document.getElementById('tit') seguido de ###titulo.innerHTML. Contudo o texto perde a formatação da tag h1, já tentei o comando ###titulo.style.fontsize='2em', mas isso só altera o que está fora do script, ou seja, não consigo que após clicar no botão criado a formatação tanto do h1 id="tit">Conversor de medidas</h1 se mantenha.

Já para o botão é pior pois este some, e não sei como colocá-lo devolta.

imagem quando aperto no botão

imagem após submeter o valor da distância

gustavoguanabara / javascript

Ajuda no desafio 5 #73