javascript - How can I put one number in front of another in the style of an LCD clock?

Question

I am generating a number in the style of lcd clocks.

I would like to know how I can put one number in front of another. for example I would like to show 123.

but I do not know how to do it. thank you very much.

 <div id="preformatted">

 </div>

 <div class="number-entry-pane">
 <label>Enter a digit:
 <input type="number" id="numInput" min=0 max=9 /></label>

  // Save references to my two control elements.
  var myPre = document.getElementById("preformatted");
  var numInput = document.getElementById("numInput");

  // Create an array of the numbers 0 through 9 as 7 segment digits.
  var numberStrings = [
   " __ <br/>|  |<br/>|__|<br/> ",
   "    <br/>   |<br/>   |<br/>",
   " __ <br/> __|<br/>|__ <br/>",
   " __ <br/> __|<br/> __|<br/>",
   "    <br/>|__|<br/>   |<br/>",
   " __ <br/>|__ <br/> __|<br/>",
   " __ <br/>|__ <br/>|__|<br/>",
   " __ <br/>   |<br/>   |<br/>",
   " __ <br/>|__|<br/>|__|<br/>",
   " __ <br/>|__|<br/> __|<br/>"];

  console.log(numberStrings)
  // Attach the listeners for the input changes.
  numInput.addEventListener("keyup", changeNumbers);
  numInput.addEventListener("change", changeNumbers);

  function changeNumbers(){
    // Simply use the element from the array associated with
    //  the entered number to update the preformatted display.
    myPre.innerHTML = numberStrings[numInput.value];
  }

https://jsfiddle.net/5e1dnt8m/

My idea is not to use several divs.

Answer 1

Try this solution, it will work. I have removed the max limit on the input for testing with bigger numbers.

// Save references to my two control elements.
var myPre = document.getElementById("preformatted");
var numInput = document.getElementById("numInput");

// Create an array of the numbers 0 through 9 as 7 segment digits.
var numberStrings = [
 " __ <br/>|  |<br/>|__|<br/> ",
 "    <br/>   |<br/>   |<br/>",
 " __ <br/> __|<br/>|__ <br/>",
 " __ <br/> __|<br/> __|<br/>",
 "    <br/>|__|<br/>   |<br/>",
 " __ <br/>|__ <br/> __|<br/>",
 " __ <br/>|__ <br/>|__|<br/>",
 " __ <br/>   |<br/>   |<br/>",
 " __ <br/>|__|<br/>|__|<br/>",
 " __ <br/>|__|<br/> __|<br/>"];

// Attach the listeners for the input changes.
numInput.addEventListener("keyup", changeNumbers);
numInput.addEventListener("change", changeNumbers);

function changeNumbers(){
  // Simply use the element from the array associated with
  //  the entered number to update the preformatted display.
  var digits = numInput.value.split('');
  var line=['','',''];
  for (i in digits) {
  	var numString = numberStrings[digits[i]].split('<br/>');
    line[0] += numString[0];
    line[1] += numString[1];
    line[2] += numString[2];
  }
  myPre.innerHTML = line.join('<br/>');
}

#preformatted {
    font-family: monospace;
    white-space: pre;
    padding: 5px;
    margin: 5px;
    border: 1px dotted red;
    width: 500px;
    height: 50px;
    position: relative;
    text-align: center;
}
label {
  display: block;
}

<div id="preformatted"></div>

<div class="number-entry-pane">
  <label>Enter a digit:
<input type="number" id="numInput" min=0  />
</label>
</div>