How do I get a prompt box to send data to a chat box?

Question

How do I get a prompt box to send data to a chat box?

I've been trying to get my chat box to receive data from a prompt then a person's message, but if I do send a message it will say that person is undefined and then the person's message.

/*Chat box*/

#chatbox {
  background-position: 10px 10px;
  -webkit-transition: width 0.5s ease-in-out;
  background-repeat: no-repeat;
  background-color: white;
  box-sizing: border-box;
  font-size: 16px;
  display: table;
  padding: 10px 20px 12px 15px;
  border: 1px solid #cccccc;
  height: 40.8em;
  width: 52em;
}


/*Chatbox inside border*/

.chatboxborder {
  background-position: 10px 10px;
  -webkit-transition: width 0.5s ease-in-out;
  background-repeat: no-repeat;
  background-color: white;
  vertical-align: bottom;
  overflow-y: scroll;
  transition: width 0.5s ease-in-out;
  box-sizing: border-box;
  font-size: 16px;
  display: table-cell;
  padding: 10px 20px 12px 15px;
  height: 2.8em;
  border: 1px solid #cccccc;
  width: 20em;
}


/*Chat message*/

#chatspace {
  transition-duration: 5s;
  background-color: #ECECEC;
  position: fixed;
  z-index: 4;
  bottom: 0px;
  height: 20px;
  border: 1px solid #000;
  right: 240px;
  left: 20px;
}

#chatbox p {
  transition-duration: 5s;
  -moz-border-radius: 4px;
  background: #E6E6E6;
  padding: 1em;
  margin: auto;
  border: 1px solid #BDBDBD;
  width: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxtwo">
  <script>
    //Your username is asked when a user opens the window //
    window.addEventListener('load',
      function() {


        var person = prompt("Enter your username");
        if (person != null) {
          document.getElementById("username").innerHTML =
            "Welcome, " + person + ".";
          // If the prompt is empty, anoterh appears //
          while (person == "" || person == null) {
            person = prompt("Your username can't be empty!", "");
            document.getElementById("username").innerHTML =
              "Welcome, " + person + ".";
          }
        }
      }, false);
  </script>

  <p id="username"></p>
  <br>
  <br>
</div>


<div class="container">
  <div id="chatbox">

    <div class="chatboxborder" id="chatboxborder">


    </div>

  </div>
</div>
<div class="fixed" id="boxfive">
  <script>
    // The message is showed in the chatbox //
    $(document).ready(function() {
      $('#submitmsg').click(function() {

        var message = $('#usermsg').val();

        $('#chatboxborder').append('<p id="username">' + ' says: ' + message + '</p id="username">' + '<br>');
        $('#usermsg').val('');
      });
    });
  </script>
  <form name="message">
    <input style="width: 83%" name="usermsg" type="text" id="usermsg" size="63" placeholder="Say something">
    <button type="button" id="submitmsg" value="Send">Submit</button>
  </form>
</div>

Answer 1

Just to add some explanation as to why this fixes the problem, the original code was storing the user's name in a local variable inside the event listener callback. Trying to use that variable outside the callback scope would result in undefined because it didn't exist there. You can just store the persons name in a global variable and use it when they send a message. Example in the snippet.

//Your username is asked when a user opens the window //
var name 
window.addEventListener('load',
  function() {
  var person = prompt("Enter your username");
    if (person != null) {
      document.getElementById("username").innerHTML =
        "Welcome, " + person + ".";
        name = person        
      // If the prompt is empty, anoterh appears //
      while (person == "" || person == null) {
        person = prompt("Your username can't be empty!", "");
        document.getElementById("username").innerHTML =
          "Welcome, " + person + ".";
      }
    }
  }, false);

// The message is showed in the chatbox //
$(document).ready(function() {
  $('#submitmsg').click(function() {
    var message = $('#usermsg').val();
    $('#chatboxborder').append('<p id="username">' + name + ' says: ' + message + '</p>' + '<br>');
    $('#usermsg').val('');
  });
});

/*Chat box*/

#chatbox {
  background-position: 10px 10px;
  -webkit-transition: width 0.5s ease-in-out;
  background-repeat: no-repeat;
  background-color: white;
  box-sizing: border-box;
  font-size: 16px;
  display: table;
  padding: 10px 20px 12px 15px;
  border: 1px solid #cccccc;
  height: 40.8em;
  width: 52em;
}


/*Chatbox inside border*/

.chatboxborder {
  background-position: 10px 10px;
  -webkit-transition: width 0.5s ease-in-out;
  background-repeat: no-repeat;
  background-color: white;
  vertical-align: bottom;
  overflow-y: scroll;
  transition: width 0.5s ease-in-out;
  box-sizing: border-box;
  font-size: 16px;
  display: table-cell;
  padding: 10px 20px 12px 15px;
  height: 2.8em;
  border: 1px solid #cccccc;
  width: 20em;
}


/*Chat message*/

#chatspace {
  transition-duration: 5s;
  background-color: #ECECEC;
  position: fixed;
  z-index: 4;
  bottom: 0px;
  height: 20px;
  border: 1px solid #000;
  right: 240px;
  left: 20px;
}

#chatbox p {
  transition-duration: 5s;
  -moz-border-radius: 4px;
  background: #E6E6E6;
  padding: 1em;
  margin: auto;
  border: 1px solid #BDBDBD;
  width: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxtwo">
  <p id="username"></p>
  <br>
  <br>
</div>
<div class="container">
  <div id="chatbox">
    <div class="chatboxborder" id="chatboxborder">
    </div>
  </div>
</div>
<div class="fixed" id="boxfive">
  <form name="message">
    <input style="width: 83%" name="usermsg" type="text" id="usermsg" size="63" placeholder="Say something">
    <button type="button" id="submitmsg" value="Send">Submit</button>
  </form>
</div>