gustavoguanabara / javascript

Curso de JavaScript

Home Page:https://gustavoguanabara.github.io/javascript/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Ajuda no desafio 5

diogocarvalhoivo opened this issue · comments

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.

image
imagem quando aperto no botão

image
imagem após submeter o valor da distância

Olha eu tentaria usar os métodos de escrita explicados em vídeo que e o innerHTML pois quando vc usa esse metodo .write vc re escreve todo o html

a estratégia que eu fiz foi por uma div com id="res" e dentro dela retornar a resposta

Nessa imagem vc ve a div com id="res"

image

E usando o innerHTML depois de ter pego o id com um getElementById ou um querySelector

image

dessa forma a unica coisa alterada na pagina e a div id="res".

O link abaixo e da página em funcionamento caso queira conferir da minha solução.

link do site