包含按钮的书签

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
)();

问题

How/Where 我是否声明了单击按钮时尝试调用的函数。
onclick 属性是否可以按当前方式实际调用任何函数？如果不能，我该如何调用我的函数？

目前

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

Answer 1

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

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

或者你可以正常定义函数，使用addEventListener代替onclick属性：

disSBtn.addEventListener("click", doThing);

包含按钮的书签

Bookmarklet containing a button

javascript

bookmarklet