内联脚本随机化句子的一部分

Question

我正在构建一个网页，我想在页面加载/重新加载时显示句子的部分内容。

例如：

我爱

pasta with mushroom sauce

重新加载后变成这样：

我爱

lentils with butter

开始文本保持不变，随机部分从 HTML 代码中某处的列表中更改（否则将难以管理）。

我正在尝试找到最简单、最快的解决方案来执行此操作，而无需更改划分的样式（我不希望静态文本和随机部分之间出现换行或样式更改，它需要是无缝的）并且具有一页中包含的所有代码（每个句子不会超过 5 个变量，总共不超过 10 个句子），我宁愿拥有一个大的独立文件而不是外部脚本。

我在这里看到了很多类似的问题，但是当我尝试它们时，它们无法正常工作。我擅长 HTML，但不擅长 JS。

我当前的代码是here，改编自this，但我不知道如何将文本样本拉入div中。

Answer 1

最简单、最快的方法是将数组与页面加载后运行的随机生成器结合使用：

1. 创建一个包含您想要的所有不同选项的数组
2. 页面加载后使用

   window.addEventListener('DOMContentLoaded', function() { ... })

   运行脚本
3. 引用要显示文本的元素并使用

   .textContent

   插入文本
4. 使用

   Array[Math.floor(Math.random() * Array.length)]

   从数组中随机选择任何选项（值）

const Preferences = [
  'Pizza',
  'Pasta with Mushroom Sauce',
  'Hamburgers',
  'Steak'
];
const Output = document.querySelector('output');

window.addEventListener('DOMContentLoaded', function() {
  Output.textContent = `I love ${Preferences[Math.floor(Math.random() * Preferences.length)]}.`;
})

<output></output>