<form name="multiply" onsubmit="multiplicationTable(factor.value); return false" method="GET" action"">
  <label for="factor">Enter a positive factor between 1-12:</label>
  <input type="number" id="factor" min="0" max="12" required aria-required />
  
  <button id="submit">Show multiplication table</button>
  
  <output for="factor" id="matrix"></output>
</form>
body {
  padding: calc(3rem + .5vw);
}

form {
  display: flex;
  flex-flow: column nowrap;
  gap: 2rem;
}

input[type=number] {
  padding: .5rem .8rem;
}

button {
  background-color: blueviolet;
  color: white;
  border: 3px solid black;
  padding: .8rem .25rem;
}
button:focus,
button:hover {
  outline: 3px solid blueviolet;
}

output {
  display: grid;
  justify-content: center;
  min-height: 3rem;
  border: 5px solid blueviolet;
  padding: 1rem;
}

output div {
  font-family: "Courier", monospace;
}
const factor = document.getElementById('factor'),
      matrix = document.getElementById('matrix'),
      form = document.forms.multiply;

let factorVal = factor.value;

// inspired by Codewars Kata: Multiplication Tables

function multiplicationTable(size=0) {
  let array = []
  for(let i = 1; i<=size; i++) {
    let array2 = [];
    for(let j = 1; j<=size; j++) {
      array2.push(i*j);
    }
    array.push(array2);
    
    matrix.innerHTML = '';
    
    array.forEach(item => {
      const div = document.createElement('div');
      div.innerHTML = item;   
      matrix.appendChild(div);
    });
  }
  
  return array;
}

form.addEventListener('submit', multiplicationTable(factorVal));
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.