Question

我试图动态创建一个在新信息到达时更新的html列表。这是我的代码：

＆＃13;

MODULE_NAME.MODULE_ONE

＆＃13;

setlast();
function setlast() {
  last = [
  "xyyxx", "yxyxx", "xxxxy", "yyxxy", "yxyxy"]
  };

  setInterval(function() {

  last[0] = Math.random();
  last[1] = Math.random();
  last[2] = Math.random();
  last[3] = Math.random();
  last[4] = Math.random();

}, 2000);

createHtml();

function createHtml() {
  setTimeout(function(){
    ul = document.createElement("ul");
    document.body.appendChild(ul);
    ul.setAttribute("id", "lyl");

    for(w=0; w<5; w++) {
      li = document.createElement("li");
      ul.appendChild(li);
    }
    updateT();

  },3500);
}

function updateT() {
  setInterval(function() {
  li.innerHTML = last[w];
    },2000);
}

＆＃13;

如上所述，我得到了未定义。

如果我这样做，代码可以工作，但每次Math.random生成一个新数字时，每个li都不会更新。

＆＃13;

    
    #listwrapper {
        margin-top: 2%;
        width : 100%;
    }            
    li {
        display : inline;
        float : left;
        padding : 10px;
    }

＆＃13;

setlast();
function setlast() {
  last = [
  "xyyxx", "yxyxx", "xxxxy", "yyxxy", "yxyxy"]
};

setInterval(function() {
  last[0] = Math.random();
  last[1] = Math.random();
  last[2] = Math.random();
  last[3] = Math.random();
  last[4] = Math.random();
}, 2000)


createHtml();

function createHtml() {
  setTimeout(function(){
   ul = document.createElement("ul");
    document.body.appendChild(ul);
    ul.setAttribute("id", "lyl");

    for(w=0; w<5; w++) {

    li = document.createElement("li");

     ul.appendChild(li);
     li.innerHTML = last[w];

     }
  },3500)
}

＆＃13;

#listwrapper {
    margin-top: 2%;
    width : 100%;
}
li {
    display : inline;
    float : left;
    padding : 10px;
}

＆＃13;

所以我的问题是：每次生成新号码时，如何让列表显示和更新？

非常感谢。

Answer 1

以下是仅使用pur javascript的工作示例：

/**
* Update The HTML
*
* @param {Array} last - ensure the array exist by passing it as an argument
*/
function updateHtml(last) {
  const ul = document.querySelector('#toUpdate');
  // Empty existing li node
  ul.innerHTML = ''
  for (let i = 0; i < last.length; i++) {
    // create and append li elements
    const li = document.createElement('li')
    li.innerHTML = last[i]
    ul.appendChild(li);
  }
}


setInterval(function() {
  // call with random stuff
  updateHtml([
    Math.random(),
    Math.random(),
    Math.random(),
    Math.random(),
    Math.random()
  ])
}, 2000)

// first call with strings
updateHtml([
  "xyyxx", "yxyxx", "xxxxy", "yyxxy", "yxyxy"
]);

#listwrapper {
  margin-top: 2%;
  width: 100%;
}

li {
  display: inline;
  float: left;
  padding: 10px;
}

<div id="main">
  <ul id="toUpdate">

  </ul>
</div>

关于DOM更新有很多话要说，但最重要的是我已经完成了更新功能以使其专门化，因此updateHtml根据'last'参数操作DOM。

请注意，这是一种单向数据绑定。您可以使用更复杂的结构和模式（如Observable）来完成更多工作。

希望有帮助

Answer 2

setlast();
function setlast() {
  last = [
  "xyyxx", "yxyxx", "xxxxy", "yyxxy", "yxyxy"]
  };

  setInterval(function() {

  last[0] = Math.random();
  last[1] = Math.random();
  last[2] = Math.random();
  last[3] = Math.random();
  last[4] = Math.random();

}, 2000);

createHtml();

function createHtml() {
  setTimeout(function(){
    ul = document.createElement("ul");
    document.body.appendChild(ul);
    ul.setAttribute("id", "lyl");

    for(w=0; w<5; w++) {
      li = document.createElement("li");
      ul.appendChild(li);
    }
    updateT();

  },3500);
}

function updateT() {
  setInterval(function() {
     list = ul.childNodes;
     for (var i = 0; i < list.length; i++) {
        list[i].innerHTML = last[i];  
     }
  },2000);
}

    
    #listwrapper {
        margin-top: 2%;
        width : 100%;
    }            
    li {
        display : inline;
        float : left;
        padding : 10px;
    }

这很有效。注意：

创建没有关键字let或var的变量会使它们成为全局变量，这是一件坏事。变量应仅在其应有的位置可访问。见this post。
如果last列表中的元素数量少于附加到li的{{1}}元素数量，则上述代码将失败。

动态创建更新的html列表

2 个答案: