Javascript по щелчку в скрипте - PullRequest
Новая
       17

Javascript по щелчку в скрипте

4 голосов
/ 04 февраля 2010

Хорошо, я новичок в javascript, но я хочу вызвать функцию onclick без добавления onclick = "function ()" к тегу привязки. Вот скрипт, который у меня есть, но я не могу заставить его работать: 

<script type="text/javascript">
function clicka() {
 alert("hi");
}
document.getElementById('click').onclick = clicka;
</script>

<a href="#" id="click">click</a>

Когда я нажимаю на ссылку, должно появиться предупреждение "привет", есть идеи?

Ответы [ 5 ]

6 голосов
/ 04 февраля 2010

Поместите тег SCRIPT после тега A.Браузер анализирует теги последовательно, и A еще не существует, когда анализируется тег SCRIPT.

Некоторые другие комментарии тоже:

  • Вы можете сбросить type="text/javascript"
  • Вы можете установить href = "javascript: void (0)", чтобы избежать загрязнения ключа хеша при нажатии
  • Или вы return false; в своей функции нажатия
4 голосов
/ 04 февраля 2010

Либо поместите скрипт после тега a, либо заключите скрипт в функцию window.onload. Любой из них будет работать: 

<script type="text/javascript">
window.onload = function() {
    function clicka() {
        alert("hi");
        return false;
    }
    document.getElementById('click').onclick = clicka;
}
</script>
<a href="#" id="click">click</a>

Или: 

<a href="#" id="click">click</a>
<script type="text/javascript">    
function clicka() {
    alert("hi");
    return false;
}
document.getElementById('click').onclick = clicka;
</script>

Причина, по которой он не работает, заключается в том, что вы делаете привязку к событию click тега a до появления тега a; следовательно, он не находит никаких элементов и не будет ничего делать.

Помещая скрипт в window.onload, вы указываете браузеру запускать скрипт только после загрузки всех элементов на странице и его обнаружения.

Чтобы запретить браузеру фактически перенаправлять на #, вы можете return false из функции clicka, как я отмечал выше.

2 голосов
/ 04 февраля 2010

Решение Тату Ульманена правильное, но стоит обсудить почему. Вот своего рода быстрое объяснение того, что происходит, когда страница загружается

JavaScript и DOM - это две разные вещи. Короче говоря, DOM - это иерархическая структура данных, представляющая HTML-страницу, с которой API-интерфейс предоставляется JavaScript через такие объекты, как document и другие.

DOM можно рассматривать как несбалансированное дерево с произвольным (не фиксированным) количеством узлов на любом уровне. Когда страница загружена, каждый узел / элемент / тег оценивается и присоединяется к дереву DOM в том порядке, в котором оно встречается. Когда встречается элемент script, он полностью оценивается и выполняется перед оценкой остальной части HTML-документа.

Поскольку ваш узел script находится перед узлом a, на который он ссылается, узел a еще не существует в дереве DOM, что и является причиной вашей проблемы. Перемещая элемент script после узлов, на которые он ссылается (обычно внизу страницы перед закрывающим тегом body), можно избежать этих типов ошибок. Другой распространенной практикой является использование события onload в DOM; это откладывает выполнение любой функции, назначенной в качестве ее обработчика, до тех пор, пока вся HTML-страница не будет проанализирована / отображена в дереве DOM. Более поздний метод также позволяет вам включать ваш сценарий в любом месте страницы, которую вы хотите (например, в head).

2 голосов
/ 04 февраля 2010

Ваш скрипт работает до полной загрузки страницы. Поэтому document.getElementById ('click') ничего не возвращает. Если вы хотите, чтобы ваш скрипт был наверху, вам нужно добавить событие onload в тело: 

<script type="text/javascript">

function clicka() {
 alert("hi");
}

function init() {
 document.getElementById('click').onclick = clicka;
}

</script>

<body onload="init()">

  <a href="#" id="click">click</a>

</body>

Или вы можете использовать window.onload 

<script type="text/javascript">

function clicka() {
 alert("hi");
}

function init() {
 document.getElementById('click').onclick = clicka;
}

window.onload = init;

</script>


<a href="#" id="click">click</a>
0 голосов
/ 04 февраля 2010

, если функция находится перед тегом, document.getElementById('click') возвращает null. Поэтому поставьте его после тега, и он будет работать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...