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

问题

如何/在何处声明我点击按钮时试图调用的功能。
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);

包含按钮的书签

1 个答案: