用onclick替换数组元素

时间:2014-05-12 07:55:59

标签: javascript arrays

我正在尝试在onclick上显示新的混洗数组列表,但我的代码只是将新的混洗数组附加到上一个列表下面。我的代码是:

function shuffleArray() {
        var array = ['1','2','3','4'];
            for (var i = array.length - 1; i > 0; i--) {
                var j = Math.floor(Math.random() * (i + 1));
                var temp = array[i];
                array[i] = array[j];
                array[j] = temp;
                }


    for (i=0;i<array.length;i++) {
            var span = document.createElement('span');
            span.innerHTML = array[i];
            span.onclick = shuffleArray; //calls the same function
            var div = document.createElement('div');
            div.appendChild(span);
            document.body.appendChild(div);
            }
    }

当前输出:

    2
    1
    4 // if I click here then results gets appended below
    3
    3
    2
    4
    1 // if I click here then results gets appended below
    2
    1
    4
    3 // and so on

所需的输出:我希望每次单击某个数组元素时,都会使用新的数组元素更新页面内容。

2 个答案:

答案 0 :(得分:1)

以下是简单版本,但由于您使用.onclick并且在使用.innerHTML='';

销毁元素之前未删除这些引用,因此容易出现内存泄漏
var wrapping_div = document.createElement('div');

document.body.appendChild(wrapping_div);

function shuffleArray() {
  var array = ['1','2','3','4'];
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
  wrapping_div.innerHTML = '';
  for (i=0;i<array.length;i++) {
    var span = document.createElement('span');
    span.innerHTML = array[i];
    span.onclick = shuffleArray; //calls the same function
    var div = document.createElement('div');
    div.appendChild(span);
    wrapping_div.appendChild(div);
  }
}

shuffleArray();

更好的方法是http://jsfiddle.net/NCUDv/2/

var wrapping_div = document.createElement('div');

document.body.appendChild(wrapping_div);

function shuffleArray() {
  var i, j, temp, span, div,
      c = wrapping_div.childNodes, 
      l = c.length,
      array = ['1','2','3','4'], 
      k = array.length;
  for (i=k-1; i>=0; i--) {
    j = Math.floor(Math.random() * (i + 1));
    temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
  for (i=l-1; i>=0; i-- ) {
    c[i].firstChild.removeEventListener('click', shuffleArray);
    wrapping_div.removeChild(c[i]);
  }
  for (i=0; i<k; i++) {
    span = document.createElement('span');
    span.innerHTML = array[i];
    span.addEventListener('click', shuffleArray);
    div = document.createElement('div');
    div.appendChild(span);
    wrapping_div.appendChild(div);
  }
}

shuffleArray();

答案 1 :(得分:1)

var container=document.createElement ("div");
document.body.appendChild (container);

function shuffleArray() {
    var array = ['1','2','3','4'], l=array.length;
    var i,j,tmp;
    for (i = l - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        temp = array[i];
        array[i] = array[j];
        array[j] = temp;
        }

    var span;
    container.innerHTML="";
    for (i=0;i<l;i++) {
        span = document.createElement('span');
        span.innerHTML = array[i];
        span.onclick = shuffleArray; //calls the same function
        container.appendChild(span);
        }
    }

编辑

var container=document.createElement ("div");
document.body.appendChild (container);

function shuffleArray() {
    var array = ['1','2','3','4'], l=array.length;
    var i,j,tmp;
    for (i = l - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        temp = array[i];
        array[i] = array[j];
        array[j] = temp;
        }

    var p;
    container.innerHTML="";
    for (i=0;i<l;i++) {
        p = document.createElement('p');
        p.style.margin="0px";
        p.innerHTML = array[i];
        p.onclick = shuffleArray; //calls the same function
        container.appendChild(span);
        }
    }