JSFiddle - React, Tailwind, and code Playground

by danmana

HTML

<table>
    <tr>
        <td><input type="text" size="1" id="1x"/></td>
        <td><input type="text" size="1" id="2x"/></td>
        <td><input type="text" size="1" id="3x"/></td>
    </tr>
    <tr>
        <td><input type="text" size="1" id="4x"/></td>
        <td><input type="text" size="1" id="5x"/></td>
        <td><input type="text" size="1" id="6x"/></td>
    </tr>
    <tr>
        <td><input type="text" size="1" id="7x"/></td>
        <td><input type="text" size="1" id="8x"/></td>
        <td><input type="text" size="1" id="9x"/></td>
    </tr>
</table>
<input id="numbers"><br>
<a id="copy-to-numbers" href="#">Copy To Numbers</a>
<a id="copy-from-numbers" href="#">Copy From Numbers</a>

JavaScript

document.getElementById('copy-to-numbers').addEventListener('click', function(e) {
    e.preventDefault();
    var i, numbers = [];
    //gather the numbers array
    for (i = 1; i <= 9; i++) {
        numbers[i] = document.getElementById(i + "x").value || 0;
    }
    //make a string from the numbers array
    numbers = numbers.join('');
    document.getElementById('numbers').value = numbers;
}, false);

document.getElementById('copy-from-numbers').addEventListener('click', function(e) {
    e.preventDefault();
    var i, numbers = document.getElementById('numbers').value;
    //save the numbers in each input
    for (i = 1; i <= 9; i++) {
        if (numbers[i - 1] != '0') {
            document.getElementById(i + "x").value = numbers[i - 1];
        } else {
            document.getElementById(i + "x").value = '';
        }
    }
}, false);