How to change <p> tag content in input box value?

Question

I have a one word <p> , and I'm looking to change the content of that paragraph to the value of a input box. It's really simple but I'm new to JavaScript and jQuery. This is the paragraph to change

<p class="editor-example" id="screen-name">Name</p>

and this is the form and the button I'm using to get and apply the change

<form id="info">                    
<input id="nameID" name="name" type="text" size="20">
</form>
<button id="apply" type="button">Apply</button>

Making the paragraph automatically change when the input box changes instead of a button would be handy if you want to take your time. Thanks!!

Answer 1

Put the button inside the form and add an event listener to it. Then grab the value from the input and use innerHTML to replace the content inside p tag

 document.getElementById('apply').addEventListener('click', function() { document.getElementById('screen-name').innerHTML = document.getElementById('nameID').value.trim() }) 

 <p class="editor-example" id="screen-name">Name</p> <form id="info"> <input id="nameID" name="name" type="text" size="20"> <button id="apply" type="button">Apply</button> </form> 

Answer 2

You need to write keypress event for the text box

 $("#text").keypress(function() { $("#p").html($("#text").val()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p id="p">p</p> Please change the value of imput to change p: <input id="text"></input> 

Answer 3

As you said:

Making the paragraph automatically change when the input box changes instead of a button would be handy if you want to take your time. Thanks!!

In Jquery:

$(document).ready(function(){
   $('#nameID').keyup(function(){
      $('#screen-name').text($(this).val());
    });
});

In html:

<p class="editor-example" id="screen-name">Name</p>
<form id="info">                    
    <input id="nameID" name="name" type="text" size="20">
</form>
<button id="apply" type="button">Apply</button>

Answer 4

You can do like this:

 $(document).ready(function(){ $("#nameID").keyup(function(){ var name = $("#nameID").val(); $("#screen-name").text(name); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p class="editor-example" id="screen-name">Name</p> <form id="info"> <input id="nameID" name="name" type="text" size="20"> </form> <button id="apply" type="button">Apply</button> 

Answer 5

 $("#apply").click(function() { $("#paragraph").text($("#nameID").val()); }); 

 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <p id="paragraph">This Text changes from the form below</p> <form> <input id="nameID" type="text" > <button id="apply" type="button">Apply</button> </form>