用onclick替换数组元素

Replace array elements with onclick

本文关键字：数组元素替换 onclick 更新时间：2023-09-26

我试图在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

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

下面是简单的版本，但这很容易发生内存泄漏，因为您使用的是.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();

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