problem with dom createelement and innerhtml

Question

/*************** javascript *****************/

function here(getValue) {

    alert(getValue)
}

function aaa() {

    document.getElementById('asd').innerHTML = '<input type="text" name="textfield" onkeyup="here(this.value)" />'
}

function aaa2() {

    var temp = document.getElementById('asd').innerHTML
    document.getElementById('asd').innerHTML = temp+'<input type="text" name="textfield" onkeyup="here(this.value)" />'
}

function dom() {

    var zzz = document.getElementById('asd')

    var inp = document.createElement('input')
    inp.type = 'text'
    inp.name = 'textfield'
    inp.onkeyup = function() {here(this.value)}

    zzz.appendChild(inp)
}

/************************************/

<div id="asd"> 
    <input type="text" name="textfield" onkeyup="here(this.value)" />
</div>

<input type="button" name="Button1" value="Button1" onclick="aaa2()" />
<input type="button" name="Button2" value="Button2" onclick="dom()" />

need some help...

i create a textfield using dom by click Button1, then combine with textfield using innerhtml by click button2.

the problem is after combine the dom createelement with innerhtml, the textfield created by dom cannot call the javascript function...

anyone have a solution...

thanks...

Answer 1

I don't see anything wrong with the code as to how it works (maybe not best practices, but it works).

Tested and working in firefox 3.5. See test page at http://ashita.org/StackOverflow/innerhtml.html

Answer 2

the problem is like this...

first you must select button2, then select button1. you will get 3 textfield. when you enter any value in middle textfield, it should call a javascript here() function, but it don't call it.

note : the middle textfield created by selecting button2 (call function dom())

thanks...

Answer 3

Your problem is with this

inp.onkeyup = function() {here(this.value)}

You can't define onkeyup like this if it didn't existed before. Plus, this argument must be a string (basically, the Javascript code to execute)

inp.setAttribute('onkeyup','here(this.value)');

Answer 4

thanks man...

Answer 5

Just came across this, I was adding some markup via innerHTML. Each added construct had an input field which could be incre/decremented by user interaction per a row. Anyway, each time I added a new item to the list it would default to its string concatenated value which was its initial state rather than the values set in the script through user interaction. The javascript picked up the form values. However when I added a new row via innerHTML, all row input field values would reset to the markup's set value. This was bafflling and I kept blaming innerHTML, however through stumbling on this page and remember the function, using setAttribute instead of the .value setter worked like a charm. Last bug before a launch so...Thanks!!!!