将返回的数组项附加到 html

Append Array returned item to html

本文关键字：html 返回 数组      更新时间：2023-09-26

下面的函数getRandom（）工作正常，并返回数组的随机项。如何将退货商品附加到我的 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>

您可以使用

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>

// '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>

首先

，您需要在单击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()

相关文章：