将返回的数组追加到 html

Question

下面的函数 getRandom() 工作正常，并且 return 是数组的一个随机项。如何将 return 项目附加到我的 DOM？我尝试了几种方法附加子节点和创建文本节点，但无法使其工作。

我想做的是让 getRandom 附加到我的 html。

// 'use strict';

var button;
var randomButton;
var myArray = [];
var list = document.getElementById("greatList");
var item = document.getElementById("addItems").value;
//console.log(item);

document.addEventListener('DOMContentLoaded', init);

function init(){
  button = document.getElementById('addButton');
 

 document.querySelector('#addButton').addEventListener(addField);
 document.querySelector('#random_button').addEventListener(getRandom);
 //button.addEventListener('click', getItem)

}

function addField(){
 var item = document.getElementById("addItems").value;
 var items = item.split(',');
 for (var i=0; i < items.length; i++){
  var newField = document.createElement('li');
  newField.appendChild(document.createTextNode(items[i]));
  list.appendChild(newField);
  myArray.push(item);
 } 
}

function getRandom(){
 
 var randomize = myArray[Math.floor(Math.random() * myArray.length)];
 var newRandomItem = document.getElementById("newRandom");
 newRandomItem.appendChild(randomize);
 
 return randomize;
};

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>HomeWork 1 - Add Name to list</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
 <div class="list">
  <h2>List: </h2>
  <section class="top">

   <input type="text"  multiple="multiple" id="addItems">
   <button type="submit" id="addButton" onclick="addField()">Add</button>
   <button id="random_button">Get Random</button>
  </section>
  <hr>
  <section class="result">
   <ul id="greatList">
    <li class="singleLine">Hello</li>
   </ul>
  </section>
  <section>
   <ul >
    <li id="newRandom"></li>
   </ul>
  </section>
 </div>
</div>
<script src="app.js"></script> 
</body>
</html>

Answer 1

您可以使用 innerHTML。请注意，"Hello" 不存在于您的数组中。

// 'use strict';

var button;
var randomButton;
var myArray = [];
var list = document.getElementById("greatList");
var item = document.getElementById("addItems").value;
//console.log(item);

document.addEventListener('DOMContentLoaded', init);

function init(){
  button = document.getElementById('addButton');
 

 document.querySelector('#addButton').addEventListener(addField);
 document.querySelector('#random_button').addEventListener('click', getRandom);
 //button.addEventListener('click', getItem)

}

function addField(){
 var item = document.getElementById("addItems").value;
 var items = item.split(',');
 for (var i=0; i < items.length; i++){
  var newField = document.createElement('li');
  newField.appendChild(document.createTextNode(items[i]));
  list.appendChild(newField);
  myArray.push(item);
 } 
}

function getRandom(){
 
 var randomize = myArray[Math.floor(Math.random() * myArray.length)];
 var newRandomItem = document.getElementById("newRandom");
    if(randomize != undefined) {
       newRandomItem.innerHTML = randomize;
 
 return randomize;
      }
     else {
       return false;
       }

};

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>HomeWork 1 - Add Name to list</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
 <div class="list">
  <h2>List: </h2>
  <section class="top">

   <input type="text"  multiple="multiple" id="addItems">
   <button type="submit" id="addButton" onclick="addField()">Add</button>
   <button id="random_button">Get Random</button>
  </section>
  <hr>
  <section class="result">
   <ul id="greatList">
    <li class="singleLine">Hello</li>
   </ul>
  </section>
  <section>
   <ul >
    <li id="newRandom"></li>
   </ul>
  </section>
 </div>
</div>
<script src="app.js"></script> 
</body>
</html>

Answer 2

// 'use strict';

var button;
var randomButton;
var myArray = [];
var list = document.getElementById("greatList");
var randomlist = document.getElementById("greatList");
var item = document.getElementById("addItems").value;
//console.log(item);

document.addEventListener('DOMContentLoaded', init);

function init(){
  button = document.getElementById('addButton');
 

 document.querySelector('#addButton').addEventListener(addField);
 document.querySelector('#random_button').addEventListener(getRandom);
 //button.addEventListener('click', getItem)

}

function addField(){
 var item = document.getElementById("addItems").value;
 var items = item.split(',');
 for (var i=0; i < items.length; i++){
  var newField = document.createElement('li');
  newField.appendChild(document.createTextNode(items[i]));
  list.appendChild(newField);
  myArray.push(item);
 } 
}

function getRandom(){
 
 var randomize = myArray[Math.floor(Math.random() * myArray.length)];
 var randomList= document.getElementById("randomList");
     
    var randomElement= document.createElement('li');
    randomElement.appendChild(document.createTextNode(randomize));
 randomList.appendChild(randomElement);
 
 //return randomize;
};

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>HomeWork 1 - Add Name to list</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
 <div class="list">
  <h2>List: </h2>
  <section class="top">

   <input type="text"  multiple="multiple" id="addItems">
   <button type="submit" id="addButton" onclick="addField()">Add</button>
   <button id="random_button" onclick="getRandom()">Get Random</button>
  </section>
  <hr>
  <section class="result">
   <ul id="greatList">
    <li class="singleLine">Hello</li>
   </ul>
  </section>
  <section>
   <ul id="randomList">
    <li id="newRandom"></li>
   </ul>
  </section>
 </div>
</div>
<script src="app.js"></script> 
</body>
</html>

Answer 3

首先你需要在点击 Get Random 按钮时调用 getRandom() 然后你可以在 getRandom()

中看到你做错了什么

您需要在 getRandom()

中进行这些更改

function getRandom(){

    var randomize = myArray[Math.floor(Math.random() * myArray.length)];
    var newRandomItem = document.getElementById("newRandom");

    var newField = document.createElement('li');
    newField.appendChild(document.createTextNode(randomize));
    newRandomItem.appendChild(newField);

    return randomize;
};

并在 HTML 页中 <button id="random_button" onclick="getRandom()">Get Random</button> 和 <ul id="newRandom"></ul>

你可以删除 init()

将返回的数组追加到 html

Append Array returned item to html

javascript

arrays

append