JavaScript如何将随机数组索引关联至对应翻译数组索引？

我想要制作一个展示随机俄语名言的简易网页，同时在独立区域显示对应的英文翻译。目前名言是随机选取的，请问如何将名言数组的随机索引关联到翻译数组的对应索引位置？我是编程新手，欢迎任何建议。

原代码 #

JavaScript #

let quotes = [
  "Вчера на вечеринке мы весело провели время", "Я начал здесь работать три года назад",
  "Вчера был худший день в моей жизни", "Когда-то у меня был щенок по кличке Шарик", "Все выходные шёл дождь", "Могли бы вы повторить это, пожалуйста?", "Как долго вы изучаете русский?",
  "На каком языке вы предпочитаете говорить?", "Можете посоветовать хорошую книгу на русском?"
]

let translation = ["Yesterday at the party , we had a great time.", "I started working here three years ago.", "Yesterday was the worst day of my life.",
  "I used to have a puppy named Sharik.", "It rained all weekend.", "Could you please repeat that?", "How long have you been studying Russian?",
  "In which language do you prefer to speak?", "Can you recommend a good book in Russian?"
]

function newQuote() {
  let randomNumber = Math.floor(Math.random() * (quotes.length));
  document.getElementById("quoteDisplay").innerHTML = quotes[randomNumber]
};
newQuote()

HTML #

<div id="quoteDisplay"></div>

解决方案 #

方法一：利用相同索引直接关联（最直接） #

你的两个数组长度一致，且对应位置的元素完全匹配，只需要用同一个随机索引同时获取名言和翻译即可：

1. 修改HTML，新增翻译显示容器：

<div id="quoteDisplay"></div>
<div id="translationDisplay"></div>

2. 更新JS函数，同时渲染名言和翻译：

function newQuote() {
  let randomNumber = Math.floor(Math.random() * quotes.length);
  // 渲染俄语名言
  document.getElementById("quoteDisplay").innerHTML = quotes[randomNumber];
  // 用同一个索引渲染对应英文翻译
  document.getElementById("translationDisplay").innerHTML = translation[randomNumber];
};
newQuote()

方法二：优化数据结构（更易维护） #

如果后续要添加更多内容，分开两个数组容易出错，建议把每一组名言和翻译合并为对象，放在同一个数组里，结构更清晰：

// 重新组织数据，每个元素包含一组俄语名言和英文翻译
let quotePairs = [
  {
    russian: "Вчера на вечеринке мы весело провели время",
    english: "Yesterday at the party , we had a great time."
  },
  {
    russian: "Я начал здесь работать три года назад",
    english: "I started working here three years ago."
  },
  {
    russian: "Вчера был худший день в моей жизни",
    english: "Yesterday was the worst day of my life."
  },
  {
    russian: "Когда-то у меня был щенок по кличке Шарик",
    english: "I used to have a puppy named Sharik."
  },
  {
    russian: "Все выходные шёл дождь",
    english: "It rained all weekend."
  },
  {
    russian: "Могли бы вы повторить это, пожалуйста?",
    english: "Could you please repeat that?"
  },
  {
    russian: "Как долго вы изучаете русский?",
    english: "How long have you been studying Russian?"
  },
  {
    russian: "На каком языке вы предпочитаете говорить?",
    english: "In which language do you prefer to speak?"
  },
  {
    russian: "Можете посоветовать хорошую книгу на русском?",
    english: "Can you recommend a good book in Russian?"
  }
];

function newQuote() {
  let randomNumber = Math.floor(Math.random() * quotePairs.length);
  let selectedPair = quotePairs[randomNumber];
  document.getElementById("quoteDisplay").innerHTML = selectedPair.russian;
  document.getElementById("translationDisplay").innerHTML = selectedPair.english;
};
newQuote()

HTML部分和方法一一致，保留两个显示容器即可。

额外实用建议 #

• 添加刷新按钮：点击即可更换新的名言和翻译

<button onclick="newQuote()">换一句名言</button>
<div id="quoteDisplay"></div>
<div id="translationDisplay"></div>

• 简单美化样式：让页面更易读

#quoteDisplay {
  font-size: 1.2rem;
  margin: 20px 0;
  color: #2c3e50;
}
#translationDisplay {
  font-size: 1rem;
  color: #7f8c8d;
  font-style: italic;
}
button {
  padding: 8px 16px;
  cursor: pointer;
}

内容的提问来源于stack exchange，提问作者Simon Andrews