Add paragraph with jQuery

Asked

Viewed 73 times

0

Good evening, I’m trying to add a paragraph when you clicked the button but it’s not working and I can’t figure out why, someone could help?

<script>

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

and in HTML it looks like this:

<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>
javascript html jquery

  • The part of script and html are in the same file? Which version of the library jQuery is using?

  • @Yes, I am using <script src="jquery-3.5.1.min. js" type="text/javascript"></script> for the jQuery library

2 answers

1

Good night!

your script this way

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

You need to add your Jquery this way:

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

that way everything you put inside that instruction will be executed.

code:

<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>

$("#new"). html('<>') adds html instructions inside the #new

Ps: It is necessary to call the Jquery script before the script of your code.

0

Opa Eduardo!

I adapted your script to use Jquery at the time you get the input value

$("#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>

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.