Ошибка в консоли при скрытии ссылки при клике через Polymer / Dom - PullRequest
Новая
       10

Ошибка в консоли при скрытии ссылки при клике через Polymer / Dom

1 голос
/ 21 октября 2019

Hi Stack Overflowians,

Я хочу скрыть ссылку Click foo, когда нажимаю ту же ссылку Click foo.

У меня следующий код: 

<dom-module>
    <div id="foo">
        <a href="#" onclick="toggle_visibility('foo');">Click foo</a>
    </div>

<script>
    Polymer({
        is: 'test-file',

        toggle_visibility: function(id) {
            var e = document.getElementById(id);

            if (e.style.display === "none") {
                e.style.display = "block";
            } else {
                e.style.display = "none";
            }
        });
</script>
</dom-module>

Я получаю сообщение об ошибке на вкладке Консоль при нажатии на ссылку Click foo: 

Uncaught ReferenceError: toggle_visibility is not defined at HTMLAnchorElement.onclick

Я хочу, чтобы ссылка скрывалась при нажатии на ссылку Click foo

Может кто-нибудь, пожалуйстапомощь?

Заранее спасибо

1 Ответ

0 голосов
/ 21 октября 2019

В Polymer вы декларативно добавляете обработчики событий, используя on- + имя события. Так что в вашем случае это будет on-click, а не onclick.

Кроме того, вам нужно будет указать имя метода, а не вызывать его. Таким образом, ваш тег будет выглядеть примерно так: 

<a href="#" on-click="toggle_visibility">Click foo</a>

Поскольку это не передает параметр, вы можете найти другой путь, например, использовать атрибут data-, или, возможно, если отношение к якору являетсяТо же самое каждый раз, просто полагайтесь на тот факт, что div является родительским узлом: 

toggle_visibility: function(event) {
    var e = event.currentTarget.parentNode;

    if (e.style.display === "none") {
        e.style.display = "block";
    } else {
        e.style.display = "none";
    }
}

UPDATE : также обратите внимание, что если вы используете метод, который будет запрашивать элементчтобы переключить отображение для, вам, скорее всего, придется запрашивать shadowDom, а не уровень документа. Так что 

var e = document.getElementById(id);

станет: 

var e = this.shadowRoot.getElementById(id);
...