JavaScript：如何仅显示插入到字符串中的一个数组项？
[英]JavaScript: How to Display only One Array Item interpolated into a string?
问题描述
大多数代码已从我从此站点更改的主要源代码更改：NewRetroWave名称生成器： https ://codepen.io/njmcode/details/JdRaWX
上面带有代码段的站点使用jQuery库。 对于我的项目，我仅使用JavaScript，HTML和CSS。
const arrayOne = [one, two, three, four, five,];
上面的代码是将所有项目输出到下面的代码的数组，在通过HTML按钮功能生成代码时， 我只想显示一个项目 。
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>
由于我的问题似乎模棱两可，因此请您先提出我要上传的内容。
这是输出： 编写提示生成器输出
这是我的写作提示生成器的输出，您可以看到它输出了整个数组，而不是所述数组中的一项。
2 个解决方案
解决方案1
0 2018-08-07 00:36:40
我不知道我是否完全了解您需要什么，但是，如果您需要从数组中获取随机项，就是这样。
var arr = ['one', 'two', 'three', 'four', 'five'];
function randomItemFromArray(arr){
return arr[Math.floor(Math.random() * arr.length)]
}
解决方案2
0 已采纳 2018-08-07 02:48:31
您当前在sentenceOne arrayOne数组中仅使用arrayOne ，即随机单词的数组：
const sentenceOne = [`Your generated item is: ${arrayOne}`, `Random Item Generated: ${arrayOne}`, `Generated: ${arrayOne}`];
但是，您已经将arrayOne 硬编码到每个sentence 。 现在，第一个sentenceOne正好是：
[
"Your generated item is: one,two,three,four,five",
"Random Item Generated: one,two,three,four,five",
"Generated: one,two,three,four,five"
]
生成随机字符串时，您需要同时选择一个随机前缀字符串（ Generated ... ） 和一个来自arrayOne的随机项。 我建议定义sentenceOne只包含前缀字符串的句子，然后在生成新项目时，在arrayOne和sentenceOne randArray上分别调用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>
如何将插入的字符串/动态属性传递给 Javascript hash？
[英]How to pass an interpolated string/dynamic property in to a Javascript hash?
Firebase JavaScript - 数组中的映射值仅显示最后一项
[英]Firebase JavaScript - Mapping values from array only display last item
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.