如何將 js 文件中的內聯 javascript 代碼更改為純 javascript 代碼？

Question

我目前正在學習 js，並且正在制作 chrome 擴展。
完成教程后，我想為擴展添加更多功能。 我做到了！
你可以在下面看到，我添加了按鈕來刪除相應的列表。
我添加了什么

但是，當我部署擴展時，它無法工作。 我發現問題是 chrome 擴展不允許你有內聯 JavaScript。
而且我不知道如何將代碼轉換為純 js。

這是我的代碼，它將以 html 的形式呈現項目列表。
<ul id="uls"></ul>

const ulElement = document.getElementById('uls');

function render(lists) {
    let listItems = ''
    for (let i = 0; i < lists.length; i++) {
        listItems += `
            <li>
                <button class='remove_data ${i}' onclick=getValue(this)>x</button>
                <a target='_blank' href='${lists[i]}'>
                    ${lists[i]}
                </a>
            </li>
        `
    }
    ulElement.innerHTML = listItems;
}

這是刪除 function 的 js 代碼。

const buttons = document.getElementsByClassName('remove_data');
let myWebsites = []

function getValue(element) {
    index = parseInt(element.className.split(' ')[1])
    deleteItem(index)

function deleteItem(index) {
    myWebsites.splice(index, 1)
    localStorage.setItem('myWebsites', JSON.stringify(myWebsites));
    render(myWebsites);
}

這些代碼在我的實時服務器中運行良好。 但是，它不能在 chrome 擴展中工作，因為 html 中有onclick=getValue(this) 。
有人可以告訴我如何將它轉換為 js 嗎？ 感謝你的幫助！

Answer 1

這是因為您使用的是onclick屬性，它使用內聯 JavaScript。

您可以解析 HTML，然后使用addEventListener為按鈕添加click事件監聽器：

const ulElement = document.getElementById('uls');

function render(lists) {
    uiElement.innerHTML = '';
    for (let i = 0; i < lists.length; i++) {
            let li = document.createElement('li');
            li.innerHTML = `<li>
                <button class='remove_data ${i}'>x</button>
                <a target='_blank' href='${lists[i]}'>
                    ${lists[i]}
                </a>
            </li>`;
            li.querySelector('button').addEventListener('click', function(){
                getValue(this);
            }
        `
    }
}