如何实现数组元素关联配对?星球大战随机语录生成器开发问题
问题:星球大战主题语录生成器的语录与建议配对失效
我正在VSCode中开发一个星球大战主题的随机语录生成器,工具需要输出随机语录及对应的适用场景建议。目前的问题是:我有quotes和advice两个数组,希望随机选中的语录能触发对应索引的建议(比如第1条语录对应第1条建议),但当前点击按钮会随机输出不匹配的语录和建议。尝试用quote[0] = advice[0]的方式关联,结果只是重复了语录,没实现配对。
相关JavaScript代码如下:
let btn = document.getElementById("btn"); let output = document.getElementById("output"); let quotes = [ /*1*/ '"Its not my fault." - Han Solo', /*2*/ '"Your focus determines your reality." - Qui-Gon Jinn', /*3*/ '"Do. Or do not. There is no try." - Yoda', /*4*/ '"Somebody has to save our skins." - Leia Organa', /*5*/ '"In my experience there is no such thing as luck." - Obi-Wan Kenobi', /*6*/ '"I find your lack of faith disturbing." - Darth Vader', /*7*/ '"Ive got a bad feeling about this." - Basically Everyone', /*8*/ '"Its a trap!" - Admiral Ackbar', /*9*/ '"So this is how liberty dies...with thunderous applause." - Padmé Amidala', /*10*/ '"Your eyes can deceive you. Dont trust them." - Obi-Wan Kenobi', /*11*/ '"Never tell me the odds." - Han Solo', /*12*/ '"RWAAARWWR!" - Chewbacca', /*13*/ '"Stay on target." - Gold Five', /*14*/ '"This is a new day, a new beginning." - Ahsoka Tano', /*15*/ '"This is the way." - The Mandalorian', ]; let advice = [ /*1*/ "Use when anything goes wrong, even if it is totally your fault.", /*2*/ "Use in pep talks to encourage positivity and to remind others to take control of their fate.", /*3*/ "Use when someone needs a little tough love.", /*4*/ "Use when you jump in and solve a problem without breaking a sweat.", /*5*/ "Use to remind others hard work pays off and sitting around waiting for chance does not.", /*6*/ "Use anytime others doubt your plans.", /*7*/ "Use when walking into a situation that could end poorly.", /*8*/ "Use anytime you suspect something is too good to be true.", /*9*/ "Use sarcastically whenever anyone institutes a new policy that looks appealing on the surface but has negative repercussions.", /*10*/ "Use when a friend needs to be reminded to go with his or her gut feeling.", /*11*/ "Use whenever you are told a task cant be done.", /*12*/ "Use when you move a chair", /*13*/ "Use to keep yourself or others focused.", /*14*/ "Use to cheer a pal up and remind him or her that every day brings new opportunities.", /*15*/ "Use when one makes the right decision", ]; // combine quote and advice // commit changes to git btn.addEventListener("click", function () { var randomQuote = quotes[Math.floor(Math.random() * quotes.length)]; var randomAdvice = advice[Math.floor(Math.random() * advice.length)]; output.innerHTML = randomQuote + "<br>" + randomAdvice; });
请问如何实现语录与对应建议的配对,使随机选中的语录能带出匹配的建议?
解决方案
当前代码的问题是生成了两个独立的随机索引,导致语录和建议无法对应。只需生成一个随机索引,用它同时获取两个数组中对应位置的内容即可解决。
修改后的按钮点击事件代码:
btn.addEventListener("click", function () { // 生成一个0到数组长度-1之间的随机索引 const randomIndex = Math.floor(Math.random() * quotes.length); // 通过同一索引获取配对的语录和建议 const pairedQuote = quotes[randomIndex]; const pairedAdvice = advice[randomIndex]; output.innerHTML = `${pairedQuote}<br><em>${pairedAdvice}</em>`; });
额外优化建议
为了从根本上避免索引不匹配的问题,建议将语录和建议合并为一个对象数组,让数据结构更清晰,后续维护也更方便:
let quoteAdvicePairs = [ { quote: '"Its not my fault." - Han Solo', advice: "Use when anything goes wrong, even if it is totally your fault." }, { quote: '"Your focus determines your reality." - Qui-Gon Jinn', advice: "Use in pep talks to encourage positivity and to remind others to take control of their fate." }, // 剩余配对按上述格式补充完整 ]; // 简化后的点击事件 btn.addEventListener("click", function () { const randomIndex = Math.floor(Math.random() * quoteAdvicePairs.length); const { quote, advice } = quoteAdvicePairs[randomIndex]; output.innerHTML = `${quote}<br><em>${advice}</em>`; });
内容的提问来源于stack exchange,提问作者StoreyCoding7
相关产品推荐
相关产品推荐

