点击Restart按钮无法恢复图片opacity为1并清空innerHTML的问题

核心问题 #

点击方块的choose函数直接用innerHTML = i++替换了方块内容，导致原本的<img>元素被彻底删除——后续Restart函数设置opacity时，根本找不到原来的图片元素，自然无法恢复显示。另外还有几处小问题需要优化。

修复步骤 #

1. 改choose函数，别删图片 #

不要直接覆盖方块内容，而是在方块里加个覆盖层显示数字，这样图片会保留在DOM中：

function choose(a) {
    const box = document.getElementById(a);
    // 避免重复添加数字
    if (!box.querySelector('.number-overlay')) {
        const numEl = document.createElement('div');
        numEl.className = 'number-overlay';
        numEl.textContent = i++;
        box.appendChild(numEl);
    }
    win();
}

同时加CSS让数字盖在图片上：

.imgbox {
    position: relative;
    display: inline-block;
    margin: 5px;
    cursor: pointer;
}
.number-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

2. 修复erase函数，只删数字层 #

不用清空整个方块内容，只移除数字覆盖层即可：

function erase() {
    i = 1;
    for (let j = 1; j <= 6; j++) {
        const box = document.getElementById(j.toString());
        const numEl = box.querySelector('.number-overlay');
        if (numEl) {
            box.removeChild(numEl);
        }
    }
}

3. 优化Restart函数，批量恢复图片显示 #

不用逐个写id，通过类名批量处理更简洁：

function Restart() {
    const imgs = document.querySelectorAll('.imgs');
    imgs.forEach(img => {
        img.style.opacity = 1;
    });
    erase();
    // 同时清空胜负提示
    document.getElementById('winn').innerHTML = '';
}

4. 修复cards函数的遍历问题 #

原来用for...in遍历HTMLCollection会拿到额外属性，换成for...of更安全：

function cards() {
    const co = document.getElementsByTagName('img');
    for (const img of co) {
        img.style.opacity = 0;
    }
}

5. 优化win函数的判断时机 #

当前每次点击都触发胜负判断，改成所有方块都被点击后再判断：

function win() {
    const boxes = document.querySelectorAll('.imgbox');
    const allClicked = Array.from(boxes).every(box => box.querySelector('.number-overlay'));
    if (!allClicked) return; // 没点完所有方块不判断

    if (
        document.getElementById('1').querySelector('.number-overlay').textContent == '1' &&
        document.getElementById('2').querySelector('.number-overlay').textContent == '3' &&
        document.getElementById('3').querySelector('.number-overlay').textContent == '5' &&
        document.getElementById('4').querySelector('.number-overlay').textContent == '4' &&
        document.getElementById('5').querySelector('.number-overlay').textContent == '2' &&
        document.getElementById('6').querySelector('.number-overlay').textContent == '6'
    ) {
        document.getElementById('winn').innerHTML = 'You Won';
    } else {
        document.getElementById('winn').innerHTML = 'You Lost Try again';
    }
}

完整修复代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        .imgbox {
            position: relative;
            display: inline-block;
            margin: 5px;
            cursor: pointer;
        }
        .number-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }
        .btns {
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="winn"></div>
    <p style="visibility: hidden;" id="hiddenvalue">X</p>
    <div id="container">
        <div class="imgbox" id="1" onclick="choose(1)" ><img id="img0" class="imgs" src="E:/GTA/to-do-app-master/todo/archons.JFIF" alt="" width="100px"></div>
        <div class="imgbox" id="2" onclick="choose(2)"><img id="img2" class="imgs" src="C:/Users/Admin/Desktop/Genshin/download (1).JFIF" alt="" width="100px"></div>
        <div class="imgbox" id="3" onclick="choose(3)"><img id="img3" class="imgs" src="E:/GTA/to-do-app-master/todo/♡︎.JFIF" alt=""></div>
        <div class="imgbox" id="4" onclick="choose(4)"><img id="img4" class="imgs" src="C:/Users/Admin/Desktop/Genshin/download (1).JFIF" alt="" width="100px"></div>
        <div class="imgbox" id="5" onclick="choose(5)"><img id="img5" class="imgs" src="E:/GTA/to-do-app-master/todo/archons.JFIF" alt="" width="100px"></div>
        <div class="imgbox" id="6" onclick="choose(6)"><img id="img6" class="imgs" src="E:/GTA/to-do-app-master/todo/♡︎.JFIF" alt="" ></div>
        
        <div class="btns"><button onclick="cards()">Start</button></div>
        <div class="btns"><button onclick="Restart()">Restart</button></div>
    </div>

    <script>
        function cards() {
            const co = document.getElementsByTagName('img');
            for (const img of co) {
                img.style.opacity = 0;
            }
        }
        let i = 1;
        function choose(a) {
            const box = document.getElementById(a);
            if (!box.querySelector('.number-overlay')) {
                const numEl = document.createElement('div');
                numEl.className = 'number-overlay';
                numEl.textContent = i++;
                box.appendChild(numEl);
            }
            win();
        }

        function win() {
            const boxes = document.querySelectorAll('.imgbox');
            const allClicked = Array.from(boxes).every(box => box.querySelector('.number-overlay'));
            if (!allClicked) return;

            if (
                document.getElementById('1').querySelector('.number-overlay').textContent == '1' &&
                document.getElementById('2').querySelector('.number-overlay').textContent == '3' &&
                document.getElementById('3').querySelector('.number-overlay').textContent == '5' &&
                document.getElementById('4').querySelector('.number-overlay').textContent == '4' &&
                document.getElementById('5').querySelector('.number-overlay').textContent == '2' &&
                document.getElementById('6').querySelector('.number-overlay').textContent == '6'
            ) {
                document.getElementById('winn').innerHTML = 'You Won';
            } else {
                document.getElementById('winn').innerHTML = 'You Lost Try again';
            }
        }

        function erase() {
            i = 1;
            for (let j = 1; j <= 6; j++) {
                const box = document.getElementById(j.toString());
                const numEl = box.querySelector('.number-overlay');
                if (numEl) {
                    box.removeChild(numEl);
                }
            }
        }

        function Restart() {
            const imgs = document.querySelectorAll('.imgs');
            imgs.forEach(img => {
                img.style.opacity = 1;
            });
            erase();
            document.getElementById('winn').innerHTML = '';
        }
    </script>
</body>
</html>

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