JavaScript调用类实例方法报错cookie.fortune is not a function问题求助

1. 全局变量命名冲突 #

你使用cookie作为全局实例变量名，和浏览器内置的Cookie相关全局标识符冲突，导致你实例化的自定义Cookie对象被覆盖，浏览器无法找到对应的add、fortune方法。
修复方式：

• 修改JS中实例化的变量名，替换为无冲突的名称，例如：

// 把最后一行的var cookie = new Cookie()改为
var fortuneCookie = new Cookie();

• 同步修改HTML中按钮的点击事件绑定：

<button onclick="fortuneCookie.add()">Add a fortune!</button><br />
<button onclick="fortuneCookie.fortune()">What does your fortune hold?</button>

2. 随机数逻辑写法错误 #

你fortune方法中的Math.random(--this.fortunes.length)写法存在两个问题：

• Math.random()不需要传入任何参数，传入的参数会被直接忽略
• --this.fortunes.length会直接修改原数组长度，每次调用fortune方法都会让数组少一个元素，后续会出现下标越界问题
  修复后的fortune方法代码如下：

fortune() {
    // 生成 [0, 数组长度) 区间的整数随机下标
    const randomIndex = Math.floor(Math.random() * this.fortunes.length);
    document.getElementById("output").innerHTML = this.fortunes[randomIndex];
}

3. 检查JS文件加载是否正常 #

你报错的页面文件名为53a.html，但HTML中引入的JS文件路径为3a.js，请确认JS文件的实际名称和路径与引入配置一致，保证JS代码能正常加载执行。

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