2009-10-07 66 views
0

我正在尝试为12音调音乐创建一个矩阵。 0-11之间的数字显示间距之间的间隔。JavaScript表错误结果

我的脚本正确地显示矩阵,因为它最初与页面一起运行;但是当我们用按钮进行另一次计算时,即使采用相同的音高设置,也会变得混乱。

这里是我的脚本:

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

在一个正确的矩阵中,第一个数字应该从桌面上的对角线上看,从左上角到右下角。

我会很感激任何帮助或意见。

回答

0

therow =新阵列(0,3,2,1,9,5,7,6,8,4,11,10)

这是数量的阵列。

therow = form.inputbox.value.split(“,”);

这是一个String数组。

然后您尝试对字符串进行算术运算。 '2'+'3'='23'不是'5',所以你会得到意想不到的结果。

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

此外矩阵()似乎要复杂得多。如何:

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

然后,摆脱那个讨厌therow全球,通话使用:

<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'),并且不要在HTML元素上使用setAttribute(),因为它在IE中有bug,而且它很丑陋) 。

+0

就是这样,非常感谢你。 顺便说一句,我无法运行你的矩阵函数,根本没有表,我想念什么? 谢谢你的其他建议,我非常感谢你的帮助。 – buba 2009-10-07 17:56:40

+0

适合我,你只需要确保在上面的onload中打电话。 – bobince 2009-10-07 20:03:30

+0

http:// debuggable。com/posts/7 + 8 === 7-in-javascript:4acba016-d204-489b-b5a0-1fd0cbdd56cb – powtac 2009-10-07 20:08:39

0

我发现字符串数组另一种解决方案,我不知道是否有与bobince的方式显著差异:

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