Modify The Size Of The Numbers I'm Showing Monospace Style

I am generating a number in the style of lcd clocks. I am somewhat tangled. I want the numbers I show to have a certain size from 1 to 10. For that I put a dropdown with a range o

Solution 1:

Add an change event to the select, get its value on change and set this value to fontSize style property

var myPre = document.getElementById("preformatted");
var numInput = document.getElementById("numInput");
var size = 1;

// 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/>');
}
// Added new eventhandler onchange of dropdown value
document.getElementById('size').addEventListener('change', function(e) {
  myPre.style.fontSize = this.value + "px"
})

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

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

  <select id='size'>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
    </select>
</div>

Solution 2:

Try this code. I have added an change event listener for the size dropdown and created a function that modifies the font size based on the value selected. The height of the bounding box will also be scaled.

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

    // 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);
    sizeInput.addEventListener("change", changeSize);

    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/>');
    }
    
    function changeSize() {
      var scalingFactor = 5;
      myPre.style['font-size'] = (12 +((this.value-1)*scalingFactor))+'px';
      myPre.style.height = (50 +((this.value-1)*scalingFactor*3.5))+'px';
    }

    #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  />
    size
      </label>

    <select id='size'>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
    </select>
    </div>

You can experiment with different values for scalingFactor to obtain better results.