Question

我正在尝试在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

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

Answer 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();

Answer 2

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

用onclick替换数组元素

2 个答案: