Javascript function isn't recognized

Question

I don't have many knowlege in javascript so I don't know what is the problem here, I create divs dynamically in js and each div call a function when is clicked but the function is not recongized. This is part of the code

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

"tema" is a text, the function "functest" has an argument "pag[aux]", this is a number.

The function is:

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

other alternative that i tried is change that: onClick='"+ functest(pag) +"':

i change the position of Quotation marks "" and the function work good but it is executed when the page is loaded, it don't wait to do click.

Max Sindwani · Accepted Answer · 2017-01-20 02:30:24Z

Your code should work if you're doing something like:

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>

I would, however, recommend using addEventListener or setting the onClick handler on the document element object rather than setting the innerHTML. Note that setting innerHTML is not advised, especially when rendering user input. See https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#Security_considerations. In your case, it probably isn't really an issue, but it's good practice to avoid it if you can :)

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>

I've been wracking my brain over this one while testing a similar solution on JSFiddle. What's really interesting is that your first solution works perfectly for me in your code snippet, but tells me the function is undefined over on JSFiddle. I've copied your code exactly. Any ideas why this would be? Fiddle. Your second solution seems to work fine in both locations :)
It's likely how the script is injected in jsFiddle. I think it's because they encapsulate the function in an onLoad handler, so it isn't hoisted to the global scope. If you add an embedded script in the HTML, it should work - jsfiddle.net/msindwan/yrL8ybgm/1.
That seems to be it! Thanks for the clarification :) Although I wasn't the one asking the question, you've still been a huge help to me in pointing out JSFiddle's limited scope. I upvoted your answer already, but wish I could award you some rep for your comment as well ;)
thanks, i solve the problem adding "bind" like that functest.bind(null, i) very helpful your suggestions.

ibrahim mahrir · Accepted Answer · 2017-01-20 02:19:24Z

0

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

you forgot to quote the parameter.

answered Jan 20, 2017 at 2:19

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

Collectives™ on Stack Overflow

Javascript function isn't recognized

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related