Неправильные результаты в таблице JavaScript

Question

Я пытаюсь создать матрицу для 12-тональной музыки. Числа между 0-11 показывают интервалы между шагами.

Мой скрипт правильно показывает матрицу, так как он изначально запускается со страницей; но когда мы делаем другой расчет с кнопкой, он становится грязным, даже с тем же самым установленным шагом.

Вот мой сценарий:

var exist = 0;

function execute (form) {
    therow = form.inputbox.value.split(",");
    matrix();
}


function shufflerow (form) {

    shuffle = function(v){  
        for (var y, x, z = v.length; z; y = parseInt(Math.random() * z), x = v[--z], v[z] = v[y], v[y] = x);
        return v;
    }

    var randomrow = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];

    shuffle(randomrow);
    var newLength = randomrow.unshift(0);
    form.inputbox.value = randomrow;
}


function matrix() {


    if (exist > 0) {
        var box = document.getElementById('matrixarea');
        var table = document.getElementById('matrixbox');
        box.removeChild(table);
    }


    if (typeof(therow) == 'undefined') {
        therow = new Array (0,3,2,1,9,5,7,6,8,4,11,10);
    }


    var body = document.getElementsByTagName("body")[0];
    var tbl = document.createElement("table");
    var tblBody = document.createElement("tbody");
    var row = document.createElement("tr");

    for(h=0 ; h < 12 ; ++h) {
        var cell = document.createElement("td");
        var cellText = document.createTextNode(therow[h]);
        cell.appendChild(cellText);
        row.appendChild(cell);
    }

    rows = new Array(11);

    for (i=1 ; i < 12 ; ++i) {
        tblBody.appendChild(row);
        var row = document.createElement("tr");
        col = new Array(11);
        col[i] = 12 - therow[i];

        var cell = document.createElement("td");
        var cellText = document.createTextNode(col[i]);
        cell.appendChild(cellText);
        row.appendChild(cell);
        tblBody.appendChild(row);

        rows[i] = new Array(11);

        for (j=1 ; j < 12 ; ++j) {
            rows[i][j] = (col[i] + therow[j]) % 12;

            var cell = document.createElement("td");
            var cellText = document.createTextNode(rows[i][j]);
            cell.appendChild(cellText);
            row.appendChild(cell);
        }
    }

    tblBody.appendChild(row);
    tbl.appendChild(tblBody);
    body.appendChild(tbl);

    tbl.setAttribute('id','matrixbox');
    tbl.setAttribute("cellpadding", "5");
    tbl.setAttribute("cellspacing", "0");

    document.getElementById('matrixarea').appendChild(tbl);

    exist++;

}

Вот форма:

<div id="matrixarea">

    <form name="primerow" action="" method="get">
        <input type="text" name="inputbox" value="">
        <input type="button" name="button2" value="Shuffle" onClick="shufflerow(this.form)">
        <input type="button" name="button1" value="Make" onClick="execute(this.form)">
    </form>

</div>

Вы можете увидеть это в действии @ http://abbasmacioglu.home.anadolu.edu.tr/m.html.

В правильной матрице первое число должно быть видно по диагонали на столе, от верхней левой ячейки до нижней правой части.

Буду благодарен за любую помощь или комментарии.

Answer 1

Я нашел другое решение для массива строк, я не знаю, есть ли существенная разница с образом Бобинса: </p> <pre><code>for (i=0; i<therow.length; i++) { therow[i] = parseInt(therow[i]); }

Answer 2

therow = new Array (0,3,2,1,9,5,7,6,8,4,11,10)

Это массив Number.

therow = form.inputbox.value.split (",");

Это массив строк.

Затем вы пытаетесь сделать арифметику со строками. «2» + «3» = «23», а не «5», поэтому вы получите неожиданные результаты.

for (var i= therow.length; i-->0;)
    therow[i]= +therow[i]; // convert to Number

Кроме того, matrix () выглядит намного сложнее, чем нужно. Как насчет:

function matrix(row) {
    var table= document.getElementById('matrixbox');
    if (table)
        table.parentNode.removeChild(table);
    table= document.createElement('table');
    table.id= 'matrixbox';

    for (var i= 0; i<row.length; i++) {
        var tr= table.insertRow(i);
        for (var j= 0; j<row.length; j++) {
            // this is the actual calculation here
            var value= (row[j]-row[i] +row.length)%row.length;
            tr.insertCell(j).appendChild(document.createTextNode(value));
        }
    }

    document.getElementById('matrixarea').appendChild(table);
}

Затем, чтобы избавиться от этого отвратительного глобуса, позвоните с помощью:

<body onload="matrix([0,3,2,1,9,5,7,6,8,4,11,10])">

и

function execute(form) {
    var row= form.elements.inputbox.value.split(',');
    for (var i= row.length; i-->0;)
        row[i]= +row[i];
    matrix(row);
}

В качестве бонуса будет работать любая длина строки.

(Забудьте cellpadding / cellspacing; вместо этого установите CSS-отступы 'padding' и 'border-spacing'. И не используйте setAttribute () для элементов HTML, поскольку в IE есть ошибки.