Букмарклет, содержащий кнопку - PullRequest
Новая
       8

Букмарклет, содержащий кнопку

0 голосов
/ 26 апреля 2018

Я пытаюсь создать букмарклет, который при нажатии отображает на странице панель поиска (т. Е. Текстовый ввод и кнопку).В текстовом поле можно ввести Id элемента dom и после нажатия кнопки поиска он найдет первый элемент, соответствующий 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

1 Ответ

0 голосов
/ 26 апреля 2018

Функции, вызываемые из атрибутов onclick, должны находиться в глобальной области видимости. Весь код в вашей закладке входит в сферу действия вашего IIFE. Вы можете сделать его глобальным именем: 

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

Или вы можете определить функцию нормально и использовать addEventListener вместо атрибута onclick: 

disSBtn.addEventListener("click", doThing);
...