Блог

Я пытаюсь создать расширение chrome, моя проблема в том, что, когда я пытаюсь разместить прослушиватель событий для каждой кнопки в классе, только у первой кнопки есть один, а у остальных нет прослушивателя событий.

 function copyButtonInitialise(){
    var copyButtons = document.getElementsByClassName("copyPassword");
    console.log("length = ", copyButtons.length);
    for (var i = 0; i < copyButtons.length; i  ){
        console.log(copyButtons[i]   " element number "   i   "= button");
        copyButtons[i].addEventListener("click", copyButtonClick);
    } 
}
 

Эта функция должна вызываться, если нажата какая-либо кнопка с классом «copyPasword».(просто хочу убедиться, что на него нажмут, но это не так)

  function copyButtonClick(){
        console.log("Hello There");
    }
 

Это функция, которая загружает пароли, она вызывается перед добавлением прослушивателей событий к кнопкам.

 async function loadPasswords(){
    document.getElementById("passwordTable").innerHTML = "";
    console.log("This is the loadpasswords function");
    chrome.storage.sync.get(null, function(items) {
        var allKeys = Object.keys(items);
        
        var passwordTable = document.getElementById("passwordTable");
        var header = passwordTable.createTHead();
        var passwordRow = header.insertRow(0);
        
        for(var i = 0; i < allKeys.length; i  ){
            let passwordKey = allKeys[i];
            chrome.storage.sync.get([allKeys[i]], function(value){
                var passwordName = Object.keys(value);
                passwordName = passwordName[0];
                var table = document.getElementById("passwordTable");
                var header = table.createTHead();
                var passwordRow = header.insertRow(0);
                var cellTwo = passwordRow.insertCell(0);
                var cell = passwordRow.insertCell(1);
                cellTwo.innerHTML = "<p1 id=passwordNameCol>"   passwordName   "</p1>";
                cell.innerHTML = "<button class=copyPassword> Copy "   '"'  passwordName   '"'  "</button>";
                
            });
        }
    });
}
 

Пароли явно загружаются.

Когда я нажимаю кнопки, на консоль ничего не отправляется, ожидая «привет» (как показано выше).

Попробуйте эти вещи:

1. внешний chrome.storage.sync.get(null возвращает все сохраненные пары ключ значение. Почему вы используете chrome.storage.sync.получите второй раз внутри инструкции «для»? В этом нет необходимости.
2. Не используйте методы вставки таблицы, но попробуйте использовать createElement и appendChild. Сначала создайте элемент THEAD (или TBODY), а затем поместите в него все строки. Когда вы закончите, вам нужно будет добавить только это тело в качестве дочернего элемента вашей таблицы.
3. Попробуйте создать кнопку с помощью createElement (как я предлагаю для любых других элементов таблицы) и после ее создания поместите на нее прослушиватель событий (внутри «для»).
4. если вы думаете повторно использовать одну и ту же таблицу для других строк differente, помните, что сначала нужно уничтожить THEAD, иначе только что созданные прослушиватели событий останутся сиротами. Уничтожьте THEAD с помощью чего-то вроде element.remove (), а не с помощью innerHTML = «».