Mauvais résultats dans la table JavaScript

Question

J'essaye de créer une matrice pour la musique de 12 tons. Les nombres compris entre 0 et 11 indiquent les intervalles entre les hauteurs.

Mon script affiche correctement la matrice car elle s'exécute initialement avec la page; mais quand on fait un autre calcul avec le bouton, ça devient en désordre, même avec le même ensemble de hauteur.

Voici mon script:

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++; 

} 

Voici la forme:

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

Vous pouvez le voir en action @http://abbasmacioglu.home.anadolu.edu.tr/m.html.

Dans une matrice correcte, le premier nombre doit être vu en diagonale sur la table, de la cellule en haut à gauche en bas à droite.

Je serais reconnaissant pour toute aide ou commentaires.

Answer 1

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

C'est un tableau de Nombre.

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

C'est un tableau de String. Vous essayez ensuite de faire de l'arithmétique sur les chaînes. '2' + '3' = '23' pas '5', donc vous obtenez des résultats inattendus.

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

De même, matrix() semble beaucoup plus compliqué qu'il devrait l'être. Que diriez-vous:

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); 
} 

Ensuite, pour se débarrasser de cette therow méchant mondiale, appel à l'aide:

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

et:

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

En prime, travaillera pour toute la longueur de la ligne . (Oubliez le padding et l'espacement des bordures par CSS et n'utilisez pas setAttribute() sur les éléments HTML, car il y a des bugs dedans sur IE. .

Answer 2

J'ai trouvé une autre solution pour le tableau de chaînes, je ne sais pas s'il y a une différence significative avec la façon de bobince:

for (i=0; i<therow.length; i++) { 
    therow[i] = parseInt(therow[i]); 
}