Передача параметров в событии Javascript onClick
Я пытаюсь передать параметр в событии onclick. Ниже приведен пример кода:
<div id="div"></div>
<script language="javascript" type="text/javascript">
var div = document.getElementById('div');
for (var i = 0; i < 10; i++) {
var link = document.createElement('a');
link.setAttribute('href', '#');
link.innerHTML = i + '';
link.onclick= function() { onClickLink(i+'');};
div.appendChild(link);
div.appendChild(document.createElement('BR'));
}
function onClickLink(text) {
alert('Link ' + text + ' clicked');
return false;
}
</script>
однако всякий раз, когда я нажимаю на любую из ссылок, предупреждение всегда показывает "Link 10 clicked"!
может кто-нибудь сказать мне, что я делаю неправильно?
спасибо
8 ответов
это происходит потому, что я распространяет область после вызова функции. Вы можете избежать этой проблемы, используя закрытие.
for (var i = 0; i < 10; i++) {
var link = document.createElement('a');
link.setAttribute('href', '#');
link.innerHTML = i + '';
link.onclick = (function() {
var currentI = i;
return function() {
onClickLink(currentI + '');
}
})();
div.appendChild(link);
div.appendChild(document.createElement('BR'));
}
или, если вы хотите более краткий синтаксис, я предлагаю вам использовать решение Ника Крейвера.
это происходит потому, что они все ссылаются на то же самое i
переменная, которая меняет каждый цикл и остается как 10
В конце цикла. Вы можете решить его с помощью закрытия, как это:
link.onclick = function(j) { return function() { onClickLink(j+''); }; }(i);
или сделать this
быть ссылкой, которую вы нажали в этом обработчике, например:
link.onclick = function(j) { return function() { onClickLink.call(this, j); }; }(i);
link.onclick = function() { onClickLink(i+''); };
является закрытием и сохраняет ссылку на переменную i
, а не значение, которое i
при создании функции. Одним из решений было бы обернуть содержимое for
цикл в функции этого:
for (var i = 0; i < 10; i++) (function(i) {
var link = document.createElement('a');
link.setAttribute('href', '#');
link.innerHTML = i + '';
link.onclick= function() { onClickLink(i+'');};
div.appendChild(link);
div.appendChild(document.createElement('BR'));
}(i));
попробуйте это:
<div id="div"></div>
<script language="javascript" type="text/javascript">
var div = document.getElementById('div');
for (var i = 0; i < 10; i++) {
var f = function() {
var link = document.createElement('a');
var j = i; // this j is scoped to our anonymous function
// while i is scoped outside the anonymous function,
// getting incremented by the for loop
link.setAttribute('href', '#');
link.innerHTML = j + '';
link.onclick= function() { onClickLink(j+'');};
div.appendChild(link);
div.appendChild(document.createElement('br')); // lower case BR, please!
}(); // call the function immediately
}
function onClickLink(text) {
alert('Link ' + text + ' clicked');
return false;
}
</script>
или вы можете использовать эту строку:
link.setAttribute('onClick', 'onClickLink('+i+')');
вместо этого:
link.onclick= function() { onClickLink(i+'');};
другой простой способ (может быть, не лучшая практика), но работает как шарм. Создайте HTML-тег вашего элемента (гиперссылки или кнопки) динамически с помощью javascript и также можете передать несколько параметров.
// variable to hold the HTML Tags
var ProductButtonsHTML ="";
//Run your loop
for (var i = 0; i < ProductsJson.length; i++){
// Build the <input> Tag with the required parameters for Onclick call. Use double quotes.
ProductButtonsHTML += " <input type='button' value='" + ProductsJson[i].DisplayName + "'
onclick = \"BuildCartById('" + ProductsJson[i].SKU+ "'," + ProductsJson[i].Id + ")\"></input> ";
}
// Add the Tags to the Div's innerHTML.
document.getElementById("divProductsMenuStrip").innerHTML = ProductButtonsHTML;
вероятно, лучше создать специальную функцию для создания ссылки, чтобы вы могли избежать создания двух анонимных функций. Таким образом:
<div id="div"></div>
<script>
function getLink(id)
{
var link = document.createElement('a');
link.setAttribute('href', '#');
link.innerHTML = id;
link.onclick = function()
{
onClickLink(id);
};
link.style.display = 'block';
return link;
}
var div = document.getElementById('div');
for (var i = 0; i < 10; i += 1)
{
div.appendChild(getLink(i.toString()));
}
</script>
хотя в обоих случаях вы получаете две функции, я просто думаю, что лучше обернуть его в функцию, которая семантически легче понять.
onclick vs addEventListener. Возможно, вопрос предпочтения (где IE>9).
// Using closures
function onClickLink(e, index) {
alert(index);
return false;
}
var div = document.getElementById('div');
for (var i = 0; i < 10; i++) {
var link = document.createElement('a');
link.setAttribute('href', '#');
link.innerHTML = i + '';
link.addEventListener('click', (function(e) {
var index = i;
return function(e) {
return onClickLink(e, index);
}
})(), false);
div.appendChild(link);
div.appendChild(document.createElement('BR'));
}
как упереться просто с помощью простого атрибута data -*, не так круто, как закрытие, но..
function onClickLink(e) {
alert(e.target.getAttribute('data-index'));
return false;
}
var div = document.getElementById('div');
for (var i = 0; i < 10; i++) {
var link = document.createElement('a');
link.setAttribute('href', '#');
link.setAttribute('data-index', i);
link.innerHTML = i + ' Hello';
link.addEventListener('click', onClickLink, false);
div.appendChild(link);
div.appendChild(document.createElement('BR'));
}