javascript - 包含按钮的书签

Question

我正在尝试创建一个小书签，单击该小书签时，会在页面上显示搜索面板(即文本输入和按钮)。在文本输入中，可以输入 dom 元素 Id，单击搜索按钮后，它将找到与搜索字段中输入的 Id 匹配的第一个元素。我的问题是我不知道如何添加 onclick属性到按钮，然后成功调用相应的函数。这是我的代码:

javascript:(
    function(){

        var disIPanel = document.getElementById('disappearioPanel');
        if(!disIPanel) {
            disIPanel = document.createElement('div');
            disIPanel.setAttribute('id', 'disappearioPanel');

            var disITxt = document.createElement('input');
            disITxt.setAttribute('type','text');
            disITxt.setAttribute('id', 'disappearioText');

            var disSBtn = document.createElement('button');
            disSBtn.innerHTML = 'Search';
            disSBtn.setAttribute('type', 'button');
            // Here I add my 'onclick' attribute, if this is not the best way to go 
            // about it, please let me know
            disSBtn.setAttribute('onclick', 'doThing()');

            disIPanel.appendChild(disITxt);
            disIPanel.appendChild(disSBtn);

            document.body.appendChild(disIPanel);
        } else {
            disIPanel.parentNode.removeChild(disIPanel);
        }
        // Here I've tried `function doThing() {...}` and `var doThing = function() {...}`
        // But neither ways of declaring/calling my function works
    }
    // Here I've tried `function doThing() {...}` and `var doThing = function() {...}`
    // But neither ways of declaring/calling my function works
)();

问题

1. 如何/在哪里声明单击按钮时尝试调用的函数。
2. 可以 onclick属性实际上以当前的方式调用任何函数，如果不是，我该如何调用我的函数？

目前

1. 小书签在调用时成功显示搜索面板，因此没有问题
2. 当我在if之后立即声明该函数时语句，然后单击 Search按钮，我收到错误 Uncaught ReferenceError: doThing is not defined
3. 当我在包装函数之外声明该函数时，收到错误 Uncaught SyntaxError: Unexpected token function

Answer 1

从 onclick 属性调用的函数必须位于全局范围内。小书签中的所有代码都在 IIFE 的范围内。您可以使用以下命令将其设为全局名称:

window.doThing = function() {
    ...
};

或者您可以正常定义该函数，并使用 addEventListener 代替 onclick 属性:

disSBtn.addEventListener("click", doThing);