How can I make this javascript function to allow more than 1 value to be entered into a input box with separated by a space?

remember that the input is just a string. Just use the split function to get get each value

function colourByNumbers() {
    input = document.getElementsByTagName('input')[0].value
    inputs = input.split(" ")    
    colour = document.getElementsByTagName('input')[1].value
    
    for (let i = 0; i < inputs.length; i++){    
       buttons = document.getElementsByTagName('button')[inputs[i] - 1]
       buttons.style.background = document.getElementsByTagName('input')[1].value
    }
}
document.getElementsByClassName('action-button')[0].addEventListener("click", colourByNumbers);

<!doctype html>
<html lang="en" data-id="0101">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      * {
        font-family: arial, helvetica, san-serif;
        box-sizing: border-box;
        font-size: 16px;
      }
      body {
        padding: 1rem;
        margin: 0;
      }
      .fb {
        display: flex;
        justify-content: space-between;
        margin: 0 0 1em 0;
      }
      div>button {
        width: 9%;
        border: 2px solid black;
        text-align: center;
        padding: 0.5rem;
        background: lightgray;
      }
    </style>
  </head>
  <body>
    <div class="fb">
      <button>1</button>
      <button>2</button>
      <button>3</button>
      <button>4</button>
      <button>5</button>
      <button>6</button>
      <button>7</button>
      <button>8</button>
      <button>9</button>
      <button>10</button>
    </div>
    <p><input> <input></p>
    <p><button class="action-button">Colour by numbers</button></p>
  </body>
</html>

What you want to do is change your function so that instead of just taking the value from the buttons input and using it, run a String.prototype.split on it and use a loop. Your JavaScript would look something like this:

function colourByNumbers() {
    inputs = document.getElementsByTagName('input')[0].value.split(" ")
    colours = document.getElementsByTagName('input')[1].value

    for (const input of inputs) {
         document.getElementsByTagName('button')[input - 1].style.background = document.getElementsByTagName('input')[1].value
    }
}
document.getElementsByClassName('action-button')[0].addEventListener("click", colourByNumbers);

Your JavaScript and HTML are also slightly malformed. For your HTML, you shouldn't use a plain <input>. Instead, specify the required attributes for your input tag like so: <input type="text" />. Also note the />, which means to close the tag without content.

For your JavaScript, you a few problems. The first thing is how you are selecting your elements. Since you are only getting one element, use document.getElementByClassName, with Element instead of Elements to only get one element. That also removes the need for the [0].

Next you have the function variables. You are not declaring proper variables, use a const in front of the definition. For settings the background, you already have selected the value, so you do not need to do it again.

Refactored JS Code:

function colourByNumbers() {
    const inputs = document.getElementByTagName('input')[0].value.split(" ")
    const colour = document.getElementByTagName('input').value

    for (const input of inputs) {
         document.getElementsByTagName('button')[input - 1].style.background = colour;
    }
}
document.getElementByClassName('action-button').addEventListener("click", colourByNumbers);