JavaScript:如何只显示一个内插到字符串中的数组项？
JavaScript:如何只显示一个内插到字符串中的数组项？
提问于 2018-08-07 08:17:11
大部分代码已经从我从这个站点更改的主要源代码中进行了更改: NewRetroWave名称生成器：https://codepen.io/njmcode/details/JdRaWX
上面的站点及其代码片段利用了jQuery库。至于我的项目，我只使用JavaScript，超文本标记语言和CSS。
const arrayOne = [one, two, three, four, five,];上面的代码是将所有项输出到下面的代码中的数组，在这个数组中，当我通过一个按钮函数生成代码时，我只想显示一个项。
const sentenceOne = [`Your generated item is: ${arrayOne}`, `Random Item Generated: ${arrayOne}`, `Generated: ${arrayOne}`];
const arrayOne = ["one", "two", "three", "four", "five"];
const sentenceOne = [`Your generated item is: ${arrayOne}`, `Random Item Generated: ${arrayOne}`, `Generated: ${arrayOne}`];
function randMathFunc(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
const initialize = (function(){
function randArray(generateArray) {
return generateArray[randMathFunc(0, generateArray.length - 1)];
}
function generateItem() {
var itm1Gen = randMathFunc(1, 1),
itm1Name = [];
for (n = 0; n < itm1Gen; n++) {
var complete = false;
while (!complete) {
let newItm1Gen = randArray(items);
if (itm1Name.indexOf(newItm1Gen) == -1) {
itm1Name.push(newItm1Gen);
complete = true;
}
}
}
var itemKey = itm1Name.join( " " );
return itemKey;
}
function displayItem(item){
document.getElementById( 'itemkeyname' ).innerHTML = item;
}
function contentRetriever() {
let item = generateItem();
displayItem(item);
}
function runProgram() {
items = sentenceOne;
contentRetriever();
document.getElementById( 'generatebutton' ).onclick = function () {
let item = generateItem();
displayItem( item );
}
}
return {
init: runProgram
}
})();
initialize.init();html {
margin: auto;
padding-top: 255px;
padding-bottom: 255px;
padding-right: 55px;
padding-left: 55px;
}
h3 {
text-transform: uppercase;
}
head, h1, h3 {
position: static;
text-align: center;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
body {
background-color: whitesmoke;
}
#itemkeyname {
position: static;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
}
#contentGenerate, #generatebutton {
position: static;
text-align: center;
font-family: monospace;
}
#generatebutton {
border-top: 0.5px;
border-bottom: 0.5px;
border-style: none;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="snippet.css" />
</head>
<body>
<div id="wrapped">
<div id="insideItems">
<div id="itemkeyname"></div>
</div>
</div>
<div id="itemArrayGenerate">
<button type="button"
id="generatebutton"
value="generate">Generate</button>
</div>
<script src="snippet.js"></script>
</body>
</html>
因为，我的问题似乎很模糊，请告诉我你想让我上传什么。
下面是输出：Writing Prompt Generator output
这是我的写作提示生成器的输出，因为您可以看到它输出的是整个数组，而不是所述数组中的一项。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-07 10:48:32
您当前仅在sentenceOne数组中使用arrayOne，即随机单词数组：
const sentenceOne = [`Your generated item is: ${arrayOne}`, `Random Item Generated: ${arrayOne}`, `Generated: ${arrayOne}`];但是您已经在每个sentence中硬编码了arrayOne。sentenceOne现在确切地说是：
[
"Your generated item is: one,two,three,four,five",
"Random Item Generated: one,two,three,four,five",
"Generated: one,two,three,four,five"
]在生成随机字符串时，您需要从arrayOne中选择一个随机前缀字符串(Generated ...)和一个随机项目。我建议将sentenceOne语句定义为只包含前缀字符串，然后在生成新项目时，同时在arrayOne和sentenceOne上调用randArray
let newItm1Gen = randArray(items) + randArray(arrayOne);
const arrayOne = ["one", "two", "three", "four", "five"];
const sentenceOne = [`Your generated item is: `, `Random Item Generated: `, `Generated: `];
function randMathFunc(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
const initialize = (function() {
function randArray(generateArray) {
return generateArray[randMathFunc(0, generateArray.length - 1)];
}
function generateItem() {
var itm1Gen = randMathFunc(1, 1),
itm1Name = [];
for (n = 0; n < itm1Gen; n++) {
var complete = false;
while (!complete) {
let newItm1Gen = randArray(items) + randArray(arrayOne);
if (itm1Name.indexOf(newItm1Gen) == -1) {
itm1Name.push(newItm1Gen);
complete = true;
}
}
}
var itemKey = itm1Name.join(" ");
return itemKey;
}
function displayItem(item) {
document.getElementById('itemkeyname').innerHTML = item;
}
function contentRetriever() {
let item = generateItem();
displayItem(item);
}
function runProgram() {
items = sentenceOne;
contentRetriever();
document.getElementById('generatebutton').onclick = function() {
let item = generateItem();
displayItem(item);
}
}
return {
init: runProgram
}
})();
initialize.init();html {
margin: auto;
padding-top: 255px;
padding-bottom: 255px;
padding-right: 55px;
padding-left: 55px;
}
h3 {
text-transform: uppercase;
}
head,
h1,
h3 {
position: static;
text-align: center;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
body {
background-color: whitesmoke;
}
#itemkeyname {
position: static;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
}
#contentGenerate,
#generatebutton {
position: static;
text-align: center;
font-family: monospace;
}
#generatebutton {
border-top: 0.5px;
border-bottom: 0.5px;
border-style: none;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="snippet.css" />
</head>
<body>
<div id="wrapped">
<div id="insideItems">
<div id="itemkeyname"></div>
</div>
</div>
<div id="itemArrayGenerate">
<button type="button" id="generatebutton" value="generate">Generate</button>
</div>
<script src="snippet.js"></script>
</body>
</html>
Stack Overflow用户
发布于 2018-08-07 08:36:40
我不知道我是否完全理解你需要什么，但是，如果你需要从数组中获取一个随机项，这就是方法。
var arr = ['one', 'two', 'three', 'four', 'five'];
function randomItemFromArray(arr){
return arr[Math.floor(Math.random() * arr.length)]
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51717183
复制相关文章
相似问题