test

HTML

<!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>

JavaScript

function colourByNumbers() {
  inputs = document.getElementsByTagName('input')[0].value
  colour = document.getElementsByTagName('input')[1].value
  buttons = document.getElementsByTagName('button')[inputs - 1]

  buttons.style.background = document.getElementsByTagName('input')[1].value
}

document.getElementsByClassName('action-button')[0].addEventListener("click", colourByNumbers);