Random Number within Image Generation

I am making a website that allows input of text to convert to images, I have done the part where it converts the input into letter.png (Ie A -> A.png), however I would like it to accommodate both the new file system and for the letters to randomise through a range of colors.

The current file system is A1.png for A Red for example, B1.png for B red, and A2.png for A pink for example.

I have tried element.src = "FONT/" + character + randomNumber + ".png"; but it is not working.

Here is the JS I have so far:

for (var i = 0, len = userInput.length; i < len; ++i) {
        function getRandomNumber(min, max) {
          return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        var minNumber = 1;
        var maxNumber = 2;
        var randomNumber = getRandomNumber(minNumber, maxNumber);
        var image = document.createElement('img');
        var character = userInput[i].toUpperCase();
        var element;

 

        if (character === "\n") {
          element = document.createElement('br');
        } else if (character === ' ') {
          var image = document.createElement('img');
          image.src = 'FONT/SPACE.png';
          element = image;
        } else {
          var image = document.createElement('img');
          element.src = "FONT/" + character + randomNumber + ".png";
          element = image;
        } image.classList.add("bobbing-photo");
        imageOutput.appendChild(image);

 

        var span = document.createElement('span');
        ///span.textContent = userInput[i];
        span.classList.add("bobbing-photo");
        imageOutput.appendChild(span);
      }

Do you have any idea why and how I can resolve this? Thanks :)