Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Document.write

no curso é apresentado a vinculação de um botão com uma função que gera um alert. eu gostaria que a ação do botão fosse escrever na página, mas quando uso document.write ele apaga tudo e só mostra a resposta (exemplo a baixo). como faço para escrever a resposta sem apagar os elementos que já estão no html?

<input>
<button>enviar</button>
<script>
    function responder(){
        var input = document.querySelector("input").value
        document.write("voce digitou: " + input)
}
    var button = document.querySelector("button")
    button.onclick = responder
<\script>
2 respostas
solução!

Fala Natali, tudo bem? Espero que sim!

Você pode utilizar o innerHTML que nos permite obter ou definir o HTML de alguma elemento, para obter o html de um elemento utilizamos:

elemento.inneHTML //Nos retorna todo o HTML que está dentro de um elemento.

Para definir o html de um elemento utilizamos o sinal de igualdade (que significa atribuição):

elemento.innerHTML = '<p>Olá! Eu sou um paragrafo</p>' 

No código assima substituimos TODO o html daquele elemento por um parágrafo. Mas... não queremos substituir todo o html daquele elemento, então podemos utilizar o + antes do simbolo de igualdade, que irá atribuir ao valor que ja estava armazado naquela variável o elemento que passarmos:

elemento.innerHTML += '<p>Olá! Eu sou um paragrafo</p>' 

Então com esse operador (+=) definimos que o html daquele elemento será o que ja estava mais o parágrafo que definimos.

Obs: O elemento, deve ser algum elemento, podemos utilizar o querySelector como você ja esta utilizando para definir qual elemento queremos substituir o HTML, então agora que ja entendeu um pouco como funciona, vamos aplicar ao seu exemplo, em que iremos selecionar algum elemento do seu HTML (nesse exemplo adicionarei uma div vazia no nosso html com o id "resposta" para inserirmos la a nossa resposta):

HTML:

<div id="resposta"></div>

No JavaScript selecionaremos esse elemento de definiremos o html dessa resposta como um parágrafo contendo a resposta:

<script>
    function responder(){
        var input = document.querySelector("input").value
        var respostaDiv = document.querySelector("#resposta")
        respostaDiv.innerHTML = "voce digitou: " + input
    }
    var button = document.querySelector("button")
    button.onclick = responder
<\script>

Logo acima tilizamos o querySelector com o seletor "#resposta" para selecionar aquela div que criamos no html e guardamos na variável respostaDiv, então, como nesta div esta armazenado o nosso elemento HTML, definimos o html desse elemento o texto que anteriormente era mostrado utilizando o document.write.

Assim deve funcionar normalmente.

Qualquer dúvida você pode consultar a documentação dessa função que utilizamos clicando aqui. Ou você também pode mandar aqui pra gente no fórum que iremos responder você.

Espero ter ajudado, bons estudos :D

Muito obrigada pela explicação detalhada.