Javascript-форум - Как оптимизировать этот код, чтоб не повторяться?(JS, jQuery, HTML)

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Как оптимизировать этот код, чтоб не повторяться?(JS, jQuery, HTML) (https://javascript.ru/forum/dom-window/45943-kak-optimizirovat-ehtot-kod-chtob-ne-povtoryatsya-js-jquery-html.html)

Как оптимизировать этот код, чтоб не повторяться?(JS, jQuery, HTML)

Я собиралась нарушить принцип DRY программирования 28 раз, но после пятого раза код перестал работать (sum1-sum5 нормально работает, а дальше (6 - 10, 28) нет).

Вот код с комментариями.

https://github.com/VaAlina/Random/bl...B8%D1%86%D0%B0

Это программа для тренировки счёта. При нажатии на кнопку, генерируются случайные числа. На пересечении каждых двух чисел, в ячейку, вводим результат. Правильный результат печатается под таблицей черным, а неправильный - красным (весь текст красный, а неправильное решение перечёркнуто).

Есть ли какие-нибудь альтернативные варианты кода для этой программы? Почему после 5-го употребления он не работает? Почему он не работает при объявлении var ?

Blondinka,
:cray:

Цитата:

Сообщение от Blondinka

Это программа для тренировки счёта. При нажатии на кнопку, генерируются случайные числа. На пересечении каждых двух чисел, в ячейку, вводим результат. Правильный результат

выделяется золотым цветом прямо в ячейке по нажатию enter или переходу в другую ячейку

Цитата:

Сообщение от Blondinka

а неправильный - красным (весь текст красный, а неправильное решение перечёркнуто).

ввод суммы чисел

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .account{border:2px #8B4513 solid;font-size:150%;margin-left:150px;background-color:#008000 }
  td{border:1px #8B4513 solid;padding:5px;width:40px;text-align:center}
  input{font-size:18px;background:#32CD32;}
  .red{text-decoration:line-through;color:#F00}
  .gold {color:#FFD700;text-align:center;font-weight:bold;background:#0000CD}
  .topic{padding:10px;background:#32CD32;color:#fffff0}
  button{color:#FFD700;text-align:center;background:#008000;font-size:18px;}
  </style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>

<body>
<script>
  var mytable = $('<table/>', {
    'class': 'account'
});
$.each(Array(5), function (i) {
    var cell = $('<tr/>');
    $.each(Array(8), function (k) {
        var input = $("<input/>", {
            "attr": {
                "size": 3
            },
            "click": function (event) {
                $(this).removeClass('gold red')
            },
            "blur": function (event) {
                var trs = $('.account tr'),
                    one = +trs.eq(i).find('td:first').text(),
                    two = +trs.eq(0).find('td').eq(k).text(),
                    sum = +this.value,
                    cls = sum == one + two ? 'gold' : 'red';
                $(this).addClass(cls)
            },
            "keyup": function (event) {
                event.which == 13 && $(this).trigger("blur")
            }
        });
        !k && !i && (input = $("<button/>", {
            "text": "random",
            "click": function (event) {
                $('.account input').removeClass('gold red').val('');
                $(".topic").each(function () {
                    $(this).text(Math.round(Math.random() * 100))
                });
            }
        }))
        cell.append(
            $('<td/>', {
                'html': i && !k || !i && k ? Math.round(Math.random() * 100) : input,
                'class': i && !k || !i && k ? 'topic' : ''
            })
        );
    });
    mytable.append(cell);
});
$('body').append(mytable);
</script>
</body>

</html>