css 为什么调用reset()函数时,按钮上的onclick函数停止工作?

3lxsmp7m  于 2023-03-09  发布在  其他
关注(0)|答案(1)|浏览(107)

尝试建立我的第一个“quizAPP”。重置功能不让我点击其他按钮时,点击。以下是我的代码:https://codepen.io/Leonyr/pen/eYLEEgq

function reset() {
    num = 1;
    let img = document.querySelector('#img');
    img.src = `${baseUrl}${num}.png`
    nextBtn.disabled = false;
    nextBtn.style.color = '#555b6e'
    nextBtn.style.pointerEvents = 'auto';
    spanNumber.innerText = num;

    for(let i=0; i < allBtn.length; i++){
        // allBtn[i].classList.add('reset');
        allBtn[i].classList.remove('chozen', 'dizabled')
        allBtn[i].style.pointerEvents = 'auto';
    }
}

我尝试创建一个函数来删除类并重置pointerEvents。

epfja78i

epfja78i1#

通过查看您的代码,您会发现一个问题,即当您单击其中一个“应答按钮”时,chosen()函数被调用。现在,在chosen()函数中,将执行以下循环:

for(let i = 0; i < allBtn.length; i++){
     allBtn[i].disabled = true;
     allBtn[i].classList.add('dizabled')
}

您正在禁用每个“应答按钮”,并且永远不会再次启用它们。禁用的按钮不可用且不可单击,这意味着将不再调用chosen()函数,因为将不会触发click事件。要解决此问题,您可以在单击重置按钮时重新启用它们:

function reset(){
    num = 1;
    let img = document.querySelector('#img');
    img.src = `${baseUrl}${num}.png`
    nextBtn.disabled = false;
    nextBtn.style.color = '#555b6e'
    nextBtn.style.pointerEvents = 'auto';
    spanNumber.innerText = num;
    for(let i=0;i<allBtn.length;i++){
        // allBtn[i].classList.add('reset');
        allBtn[i].classList.remove('chozen','dizabled')
        allBtn[i].style.pointerEvents='auto';

        allBtn[i].disabled = false; // renabling button 
    }
}

相关问题