Question

当按下html按钮时，我有一个函数可以从数组中返回两个随机单词。我怎样才能在页面列表中显示这些名称？如果页面刷新，我不关心保留列表。

var data = ['name1','name2'];


function generateName() {

    var rand = data[Math.floor(Math.random() * data.length)];
    var rand2 = data[Math.floor(Math.random() * data.length)];
    var space = " "; 

    return document.getElementById("displayName").innerHTML = rand + space + rand2;
}
;

Answer 1

假设displayName是ul元素，则可以创建li元素，并使用函数ul将这些元素附加到appendChild。

var data = ['name1', 'name2'];

function generateName() {

  var rand = data[Math.floor(Math.random() * data.length)],
    rand2 = data[Math.floor(Math.random() * data.length)];    
    
    return [rand, rand2];
};

var display = document.getElementById("displayName");
var words = generateName();

words.forEach(function(w) {
  var li = document.createElement('li');
  li.textContent = w;
  display.appendChild(li);
});

<ul id='displayName'></ul>

Answer 2

获得2个随机名称后，可以使用<li>创建2个新的createElement元素，然后使用<ul>将它们附加到appendChild(element)无序列表中。之后，我将它们作为对象返回，但这不是必需的，以便在屏幕上显示名称。

var data = ['name1','name2'];


function generateName() {

    var rand = data[Math.floor(Math.random() * data.length)];
    var rand2 = data[Math.floor(Math.random() * data.length)];
    var space = " "; 
    
    let el1 = document.createElement('li')
    let el2 = document.createElement('li')
    el1.innerHTML = rand
    el2.innerHTML = rand2

    // Adding the names to the list
    document.getElementById("list").appendChild(el1);
    document.getElementById("list").appendChild(el2);
    
    // Returning the 2 random names
    return {rand, rand2}
};

<button onclick="generateName()">add names to list</button>
<ul id="list">
list:
  
</ul>

Answer 3

您可以从generateName函数返回一个元素数组，并将其馈入一个返回一些HTML的函数（此处使用template literal生成列表项的无序列表），您可以作为HTML添加到任何元素。

const data = ['name1', 'name2'];

function generateName(data) {
  const rand = data[Math.floor(Math.random() * data.length)];
  const rand2 = data[Math.floor(Math.random() * data.length)];
  return [rand, rand2];
}

function buildHTML(arr) {
  return `<ul><li>${arr.join('</li><li>')}</li></ul>`;
}

document.body.innerHTML = buildHTML(generateName(data));

ul {
  border: 1px solid #343434;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  background-color: #efefef;
  padding: 2px;
}

li:not(:first-child) {
  border-top: 1px solid #ababab;
}

返回值并将其显示在列表中

3 个答案: