Question

为了学习Javascript，我在本地创建了一个小网站。我有一个菜单，其中包含“ li”，一个空的“ div”和几个“ section”。单击“ li”后，相应的“ section”进入空的“ div”，并且其class =“ hidden”被删除。

为此，我在“ li”上有一个循环，当单击其中一个时，在li.addEventListener中调用了一个swapContent（）函数。

一切正常！但是，在一个特定的“部分”中，我有一些按钮也可以与click和addEventListener一起使用。那是行不通的。

当我注释脚本文件中的代码并在控制台上对其进行测试时，它可以工作，但是从脚本中调用它时却不能。

我还尝试在调用带有swapContent（）的addEventListener（单击）之后立即在“ li”循环中包含与这些按钮相关的javascript代码！

window.addEventListener("load", function() {

const frame = document.getElementById('frame');

function swapSection(liText, secId){
    let section = document.getElementById(secId);
    let clone = section.cloneNode(true);
    clone.classList.remove('hidden');        
    while (frame.firstChild) frame.firstChild.remove();        
    frame.appendChild(clone); 
    let h2Select = document.getElementsByClassName('hero');
    h2Select[0].innerText = liText;  
}; 

// -- Navigation --    

var liList = document.querySelectorAll('[id^="li_"]');

for (var item of liList) {
    let li = item;
    let liId = li.id;
    let liText = li.innerText;

    // if <li> has an ID show section onclick
    if (liId) {
        const reg = /li/i;
        let secId = liId.replace(reg, 'sct');   

        // Display content into frame on item menu's click
        li.addEventListener('click', function(){
            swapSection(liText, secId);
        }, false);
    }    
};

// Buttons that don't work
const toChange = document.getElementById('toChange');
const btnDisable = document.getElementById('disable');
const btnEnable = document.getElementById('enable');

btnEnable.addEventListener("click", function(e) {
   toChange.setAttribute("disabled", false);
   toChange.innerText = 'Not Clickable'
   }
);    

btnDisable.addEventListener("click", function(e) {
   toChange.removeAttribute("disabled");
   toChange.innerText = "Clickable";
});
});

https://codepen.io/Franz333/pen/vqGLZE

上的代码

提前谢谢

一个addEventListener似乎已被另一个激活

0 个答案: