2017-01-20 3 views
2

У меня мало знаний в javascript, поэтому я не знаю, в чем проблема, Я создаю divs динамически в js, и каждый div вызывает функцию при нажатии, но функция не реконструирован. Это часть кодаФункция Javascript не распознается

for (......) { 
    var listatema = document.createElement("div"); 
    listatema.innerHTML += "<a href='javascript: void(0)' onClick='functest(" + pag + ")'>" + temat + "</a>"; 
    document.getElementById('menu').appendChild(listatema);} 
} 

«Tema» является текст, функция «functest» имеет аргумент «вол [AUX]», это число.

Функция:

function functest(arg){ 
    console.log(arg) 
} 

другой альтернативы, что я пытался это изменить, что: onClick='"+ functest(pag) +"':

я изменить позицию кавычки «» и функция работы хорошо, но она выполняется, когда страница загружена, она не дожидается, чтобы сделать клик.

ответ

1

Ваш код должен работать, если вы делаете что-то вроде:

function functest(arg) { 
 
    console.log(arg); 
 
} 
 

 
for (var i = 0; i < 10; i++) { 
 
    var listatema = document.createElement("div"); 
 
    listatema.innerHTML += "<a href='javascript: void(0)' onClick='functest(" + i + ")'>" + i + "</a>"; 
 
    document.getElementById('menu').appendChild(listatema); 
 
}
<div id="menu"></div>

Я бы, однако, рекомендуем использовать addEventListener или установив onClick обработчик на объекте элемента документа, а не установка внутреннийHTML. Обратите внимание, что установка innerHTML не рекомендуется, особенно при визуализации ввода пользователем. См. https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#Security_considerations. В вашем случае, скорее всего, это не проблема, но это хорошая практика, чтобы избежать этого, если вы можете :)

for (var i = 0; i < 5; i++) { 
 
    var wrapper = document.createElement("div"); 
 
    var listatema = document.createElement("a"); 
 
    listatema.textContent = i; 
 
    listatema.href = "javascript:void(0)"; 
 
    listatema.addEventListener('click', function(e) { 
 
    console.log(this.i); 
 
    }.bind({ i : i })); 
 
    wrapper.appendChild(listatema); 
 
    document.getElementById('menu').appendChild(wrapper); 
 
}
<div id="menu"></div>

+0

Я нарушающие покой мой мозг над этим один, проверяя аналогичное решение на JSFiddle. Что действительно интересно, так это то, что ваше ** первое ** решение отлично работает для меня в фрагменте кода, но говорит мне, что функция не определена на JSFiddle. Я скопировал ваш код точно. Любые идеи, почему это было бы? [Фидл] (https://jsfiddle.net/Obsidian_Age/yrL8ybgm/). Ваше второе решение, похоже, отлично работает в обоих местах :) –

+1

Скорее всего, скрипт вставляется в jsFiddle. Я думаю, это потому, что они инкапсулируют функцию в обработчик 'onLoad', поэтому она не поднимается в глобальную область. Если вы добавите встроенный скрипт в HTML, он должен работать - https://jsfiddle.net/msindwan/yrL8ybgm/1/. –

+0

Это похоже! Спасибо за разъяснение :) Хотя я и не тот, кто задал этот вопрос, вы все еще оказали мне огромную помощь в указании ограниченного объема JSFiddle. Я уже поддержал ваш ответ, но хотел бы, чтобы я мог наградить вас за репутацию за ваш комментарий;) –

0
onClick='functest(\""+ pag +"\")' 

Вы забыли указать параметр.

Смежные вопросы