Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Desafio 03 / Não Obrigatório

Referente ao curso Lógica de programação: praticando com desafios, no capítulo Projeto Carrinho de Compras e atividade Desafio: hora da prática

por Leandro Silva Do Nascimento
| 25k xp | 19 posts
<body>
    <h2>Boas vindas ao desafio de programação!</h2>
    <label for="paragrafo">Troque o parágrafo abaixo por uma frase </label>
    <br>
    <input id="paragrafo" type="text">
    <br>
    <button onclick="trocar()">Trocar</button>
    <p id="frase">Desejo que você
        Não tenha medo da vida, tenha medo de não vivê-la.
        Não há céu sem tempestades, nem caminhos sem acidentes.
        Só é digno do pódio quem usa as derrotas para alcançá-lo.
        Só é digno da sabedoria quem usa as lágrimas para irrigá-la.
        Os frágeis usam a força; os fortes, a inteligência.
        Seja um sonhador, mas una seus sonhos com disciplina,
        Pois sonhos sem disciplina produzem pessoas frustradas.
        Seja um debatedor de ideias. Lute pelo que você ama.</p>
</body>

// Tenha um elemento HTML na página (por exemplo, um parágrafo) e utilize JavaScript para modificar seu conteúdo usando a propriedade textContent.

function trocar() {
    let paragrafo = document.getElementById("paragrafo").value;
    let frase = document.getElementById("frase");

    console.log(`${paragrafo}`);
    frase.textContent = `${paragrafo}`;
}
1 resposta
solução!
por Armano Barros Alves Junior
| 3482.4k xp | 7356 posts
Alura Scuba Team Monitor | Suporte Educacional

Oi, Leandro! Como vai?

Gostei da forma como você usou a função textContent para alterar dinamicamente o conteúdo do parágrafo com o que for digitado no input. Isso mostra uma boa compreensão da manipulação do DOM.

Uma dica interessante para o futuro é usar o addEventListener em vez de onclick, pois isso ajuda a manter o HTML mais limpo e separa melhor estrutura e comportamento. Veja este exemplo:

document.querySelector("button").addEventListener("click", function() {
    let texto = document.getElementById("paragrafo").value;
    document.getElementById("frase").textContent = texto;
});

Esse código faz a mesma coisa que o seu, mas deixa a responsabilidade do evento no JavaScript.

Ícone de sugestão

Para saber mais:

Você também pode usar o input ou keyup como tipo de evento para capturar alterações enquanto o usuário digita. Isso torna seu código mais interativo e reativo. Veja um exemplo:

document.getElementById("paragrafo").addEventListener("input", function() {
    let texto = this.value;
    document.getElementById("frase").textContent = texto;
});

Esse código atualiza o conteúdo do parágrafo em tempo real, conforme o usuário digita. Uma ótima forma de melhorar a experiência de quem interage com sua aplicação!

Alura

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!