Add text to the bottom of a div (or another element) - emulating chat console

Question

I have a div that should be collecting text as text is entered into the input box (right now it just reproduces the input, but later it should produce semi-intelligent respo

Answer 1

This is a basic solution based on two main functions appendChild and scrollIntoView. The former appends the new response in the list (as a log). And the second fix the view in the last element appended.

Also we need to fix the height of the

tag by using the size of the

var wrapper = document.getElementById('prisonerResponse');
var commands = document.getElementById('commands');
var flag = false;

window.onload = function() {
  var command;
  var input = document.getElementById('text');

  document.getElementById("text").onkeypress = function(e) {
    e = e || window.event;
    var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
    if (charCode == 13) {
      command = document.createElement('li');
      command.innerHTML = input.value;
      commands.appendChild(command);
      command.scrollIntoView();
      fixHeight()
      document.getElementById("text").value = "";
    }
  };
};

function fixHeight() {
  if (commands.offsetHeight >= wrapper.offsetHeight && flag !== true) {
    commands.style.height = wrapper.offsetHeight + "px";
    flag = true;
  }
}

#prisonerResponse {
  position: relative;
  height: 100px;
  width: 350px;
  background-color: #fff;
  margin: 10px;
}

#prisonerResponse .overlay {
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  position: absolute;
}

#prisonerResponse .gradient {
  background-image: linear-gradient( top, rgba( 255, 255, 255, 0) 0%, rgba( 255, 255, 255, 1) 100%);
  background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, 0) 0%, rgba( 255, 255, 255, 1) 100%);
  background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, 0) 0%, rgba( 255, 255, 255, 1) 100%);
  background-image: -o-linear-gradient( top, rgba( 255, 255, 255, 0) 0%, rgba( 255, 255, 255, 1) 100%);
  background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0) 0%, rgba( 255, 255, 255, 1) 100%);
}

#commands {
  margin: 0px;
  padding: 0px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: inherit;
  overflow: hidden;
  overflow-y: scroll;
}

#text {
  width: 350px;
  display: inline-block;
}

  
  



  
 Prisoner One 
  

  
address the prisoner: