原生JavaScript结合this与递减实现20次抛硬币功能咨询

你的代码存在以下几个逻辑错误，导致功能无法正常运行：

• state属性类型冲突：初始值是数字类型0，但flip方法直接将其赋值为"heads"/"tails"字符串，后续toString、toHTML方法却仍在判断state是否等于数字0/1，判断逻辑永远不会命中
• toString方法中使用了未声明的sides变量，会意外创建全局变量，同时判断逻辑和state实际存储的值不匹配
• toHTML方法中正反硬币图片路径前缀不一致（tails用images/、heads用image/），会导致图片加载失败，同样存在state值判断不匹配的问题
• display20Flips函数未定义h3元素就直接操作，会抛出引用错误；results.push(coin.state++)的自增操作会意外修改state的值，且函数未完成编写，缺少结果统计逻辑

const coin = {
    state: 0,
    flip: function () {
        // 随机生成0或1的数字状态，0代表反面tails，1代表正面heads
        this.state = Math.floor(Math.random() * 2);
    },
    toString: function () {
        let sides;
        if (this.state === 0) {
            sides = "tails";
        } else if (this.state === 1) {
            sides = "heads";
        }
        return sides;
    },
    toHTML: function () {
        const image = document.createElement("img");
        // 统一图片路径前缀，可根据你的实际文件目录调整
        if (this.state === 0) {
            image.src = "images/tails.png";
            image.alt = "反面";
        } else if (this.state === 1) {
            image.src = "images/heads.png";
            image.alt = "正面";
        }
        return image;
    },
};

function display20Flips() {
    const results = [];
    // 提前获取页面容器，可根据你的实际页面结构调整选择器
    const textContainer = document.querySelector("h3");
    const imgContainer = document.querySelector("h1");
    let headsCount = 0;
    let tailsCount = 0;

    // 清空容器原有内容
    textContainer.innerHTML = "";
    imgContainer.innerHTML = "";

    for (let i = 0; i < 20; i++) {
        coin.flip();
        const currentResult = coin.toString();
        results.push(currentResult);
        
        // 展示文字结果
        textContainer.innerHTML += `第${i+1}次抛硬币结果：${currentResult}<br>`;
        // 追加对应图片
        imgContainer.append(coin.toHTML());

        // 统计次数
        if (currentResult === "heads") {
            headsCount++;
        } else {
            tailsCount++;
        }
    }

    // 追加统计结果
    textContainer.innerHTML += `<br>统计结果：正面共出现${headsCount}次，反面共出现${tailsCount}次`;
    return results;
}

// 调用函数执行20次抛硬币
display20Flips();

• 统一state的存储类型为数字0/1，字符串结果由toString方法统一转换，避免类型冲突
• 补全所有未声明的变量，修复全局变量污染问题
• 统一图片资源路径，避免资源加载失败
• 移除了多余的自增/自减操作，state的值仅由flip方法修改
• 补全抛硬币循环逻辑，增加正反面次数统计，同时支持文字结果和图片结果展示
• 将DOM元素查询操作移到循环外，避免重复查询DOM提升性能

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