为何JavaScript函数无法将随机马克·吐温语录输出到HTML文档？

嘿，作为新手踩大小写的坑太正常啦！咱们一起来把这个问题搞定～

核心问题分析 #

你的代码里有两个关键小错误，导致语录无法显示：

1. JavaScript内置对象的大小写错误
   JavaScript里的数学工具对象是大写开头的Math，而你写的math.floor()和math.random()是小写的math，这会被当作未定义的变量，直接导致函数运行失败。

2. 数组结构的取值问题
   你的quotes数组里每个语录都被包裹在一个子数组里（比如["xxx"]），所以当你随机取到元素时，得到的是一个数组而不是字符串，直接输出的话浏览器无法正确显示纯文本。

修正后的代码 #

1. 修正后的JavaScript文件

// Quotes
var quotes = [
 ["The size of a misfortune is not determinable by an outsider's measurement of it but only by the measurements applied to it by the person specially affected by it. The king's lost crown is a vast matter to the king but of no consequence to the child. The lost toy is a great matter to the child but in the king's eyes it is not a thing to break the heart about."],
 ["Trivial Americans go to Paris when they die."],
 ["There isn't time -- so brief is life -- for bickerings, apologies, heartburnings, callings to account. There is only time for loving -- & but an instant, so to speak, for that."],
 ["Thunder is good, thunder is impressive; but it is lightning that does the work."],
 ["Everyone is a moon, and has a dark side which he never shows to anybody."]
];

// Generate a random quote from the array
function random_item(quotes) {
  // 修正1：Math大写，修正2：获取子数组里的第一个元素（也就是语录文本）
  return quotes[Math.floor(Math.random() * quotes.length)][0];
}

2. 修正后的HTML代码

推荐用更规范的DOM操作来设置内容（比document.write更灵活）：

<div id="quotes"></div>

<!-- 先引入你的JavaScript文件 -->
<script src="你的js文件名.js"></script>
<!-- 再执行语录渲染逻辑 -->
<script>
  // 获取页面上的quotes容器，把随机语录赋值给它
  document.getElementById('quotes').textContent = random_item(quotes);
</script>

额外注意事项 #

• 确保JS文件的路径正确，比如你的JS文件叫quotes.js，和HTML文件在同一文件夹下，那src="quotes.js"就没问题。
• 脚本的顺序很重要：必须先加载JS文件（定义好数组和函数），再执行调用函数的代码，不然会报错“random_item未定义”。

这样修改后，刷新页面就能看到随机显示的马克·吐温语录啦！

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