User input displayed in a <p> element

Hello all! I am very new to coding/programing. Im trying to figure out how I can display a user input such as a name in a

element. Ex: User inputs name as Jim… and

element will update with that name in certain areas in the paragraph.
Like hi “Jim” very nice to meet you. blah blah blah “Jim” blah blah blah etc…

any help would be great!

here is my HTML:


<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>IN and Out Test</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
   
    <div id="container">
      <div id="nameDiv" class="input">Hello, whats your name: <input id="name" type="text" placeholder="Your Name Here" />
     </div> 
      <button id="entry">Enter</<button>
    </div>

    <table id="display">
      <tr>
        <th>Name</th>
        <th>Topic</th>
      </tr>
    </table>

    <script src="script.js" </script>
  </body>
</html>

and here is my javascript that I have linked:


var entry = document.getElementById("entry");
entry.addEventListener("click", displayDetails);
function displayDetails() {
    var name = document.getElementById("name") ,value;

    if (!name | |) {
        alert("Please enter name");
        return;
    }

    var display = document.getElementById("display");
}

here is my updated HTML with javascript inside… The userinput will display with the document.write command but on a new screen by itself with the added string only. Is there any way for it to update to the the Body of the HTML inside a <p> element?

here is the updated HTML


<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <br>
      Hello, whats your name: <input id="ip" placeholder="Enter name here"> <br><br>

      <button onclick="getname()"> Enter</button> <br>

    <script>
      function getname() {
        var username= document.getElementById("ip").value

        document.write("Hello, " + "<em>" + username + "</em>" + " I am so glad you can make it");
      }
    </script>



  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text

    <script> document.write("<em>" + username + " </em>")
    </script>

    ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

  </body>
</html>

this script tag is missing a > so that can be a reason for issues

and

<script> document.write("<em>" + username + " </em>")
    </script>

document.write will overwrite everything that is already in the document, you need to select an element and change the content of that one, instead of the whole document, if you want to preserve everything else.


I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

Ok great thank you for letting me know how to post in the forum. was wondering why my post looked like that…lol…so i would be able to insert the users input into a specific

element of choice?