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);

functionchangeNumbers() {
  // 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 valuedocument.getElementById('size').addEventListener('change', function(e) {
  myPre.style.fontSize = this.value + "px"
})

<divid="preformatted"></div><divclass="number-entry-pane"><label>Enter a digit:
        <inputtype="number"id="numInput"min=0  />
        size
    </label><selectid='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);

    functionchangeNumbers(){
      // 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/>');
    }
    
    functionchangeSize() {
      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;
    }

<divid="preformatted"></div><divclass="number-entry-pane"><label>Enter a digit:
    <inputtype="number"id="numInput"min=0  />
    size
      </label><selectid='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.