0

Boa noite, estou tentando adicionar um parágrafo quando clicou no botão mas não está funcionando e não consigo saber o porque, alguem poderia ajudar?

<script>

          $("#btAdd").click(function(){
                var texto = document.getElementById("t").value;
                $("#new").append("<p>"+texto+"</p>");
            });
</script>

e no HTML está assim:

<div class="form">
            <input type="text" name="text" id="t"/>
        <input type="button"
                value="Adicionar parágrafo" id="btAdd" /> <br><br>
        <input type="button"
                value="Aumentar tamanho fonte" id="btAumentarFonte" />
        <input type="button"
                value="Diminuir tamanho fonte" id="btDiminuirFonte" /><br><br>
        <input type="button"
                value="Remover último parágrafo" id="btRemoverUltimo" />
        <input type="button"
                value="Remover todos os parágrafo" id="btRemoverTodos" />
        </div>
        
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <div id="new"></div>
2
  • A parte de script e html estão no mesmo arquivo? Qual versão da biblioteca jQuery está utilizando?
    – Rfroes87
    Commented 2/11/2020 às 23:31
  • @Rfroes87 Estão, estou usando <script src="jquery-3.5.1.min.js" type="text/javascript"></script> para a biblioteca do jQuery Commented 2/11/2020 às 23:32

2 Respostas 2

1

Boa noite!

o seu script esta dessa forma

      $("#btAdd").click(function(){
            var texto = document.getElementById("t").value;
            $("#new").append("<p>"+texto+"</p>");
        });

Você precisa adicionar o seu JQuery dessa forma:

$(document).ready(function(){ <<CODE>> });

dessa forma tudo que voce colocar dentro dessa instrução irá ser executado.

codigo:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
  $("#btAdd").click(function(){
            var texto =$("#t").val();
            $("#new").html("<p>"+texto+"</p>");
        });
});
</script>

O $("#new").html('<>') adiciona as instruções html dentro do #new

Ps: é necessario chamar o script do JQuery antes da do script do seu código.

0

Opa Eduardo!

Adaptei o seu script para utilizar o Jquery na hora que pegar o valor do input

$("#btAdd").click(addText)

function addText () {
  const text = "<p>"+$("#t").val()+"</p";
  $("#new").append(text);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form">
            <input type="text" name="text" id="t"/>
        <input type="button"
                value="Adicionar parágrafo" id="btAdd" /> <br><br>
        <input type="button"
                value="Aumentar tamanho fonte" id="btAumentarFonte" />
        <input type="button"
                value="Diminuir tamanho fonte" id="btDiminuirFonte" /><br><br>
        <input type="button"
                value="Remover último parágrafo" id="btRemoverUltimo" />
        <input type="button"
                value="Remover todos os parágrafo" id="btRemoverTodos" />
        </div>
        
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <div id="new"></div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .