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.