Question

以下函数getRandom（）正常工作并返回数组的随机项。如何将退货项目附加到我的DOM？我尝试了几种方法附加child并创建文本节点，但无法使其工作。

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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 1

您可以使用innerHTML。请注意＆＃34;您好＆＃34;在您的数组中不存在。

＆＃13;

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

＆＃13;

<!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>

＆＃13;

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

首先，您需要点击getRandom()按钮致电Get Random 然后你可以在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

3 个答案: