On May 26, 5:42*am, "Tom de Neef" <tden...@qolor.nlwrote:
"DL" <tatata9...@gmail.com*wrote:
var i = 1;
var newElement = document.createElement();
newElement.innerHTML ='Item\' +i+ \': \<input type="text" name=qCK
\'+i+\' size="60"\> \<br\ <div id=\'+i+\'><button
id="chk"+i name="chk"+i *onclick="document.getElementById(\'chk
\'+i).style.display=\'none\';doCheckbox(1,\'+i2+\' ,\'+nr2+\');">Add
another checkbox</button></div>';
Yoa assign a string litteral to innerHTML. Taking away the enclosing quotes
and the escape characters, the contents of that string are (I insert
linebreaks and blanks for clarity - they are not part of the string value):
Item' +i+ ':
<input type="text" name=qCK'+i+' size="60">
<br>
<div id='+i+'>
* <button id="chk"+i name="chk"+i
* * * *onclick="document.getElementById('chk'+i).style.d isplay='none';
doCheckbox(1,'+i2+','+nr2+');">
* * *Add another checkbox
* </button>
</div>
The problem is in the very first line: what is "Item'+i+':..." supposed to
mean?
Shouldn't that be "Item+i+':..." ?
Take away the escape \ in front of all quotes that should not appear in the
innerHTML (i.e. leave them only araound chk and none.)
I think it will then get the value
Item1:
<input type="text" name=qCK1 size="60">
<br>
<div id=1>
* <button id="chk"+i name="chk"+i
* * * *onclick="document.getElementById('chk'+i).style.d isplay='none';
doCheckbox(1,value(i2),value(nr2));">
* * *Add another checkbox
* </button>
</div>
Which is still not what you want (it is not valid HTML).
I think it would be wiser to split things up:
var labeli = Item+i;
var inputName = 'qCK'+i;
var divID = i.toString();
var buttonID = 'chk'+i
... innerHTML = labeli+' \<input type="text" name='+inputName+'
size="60"... etc.
Tom
Thank you very much, Tom. I like your solution and approach, getting
very close...
var labeli = 'Checkbox item'+i;
var inputName = 'qCK'+i;
var divID = i.toString();
var buttonID = 'chk'+i
// alert(labeli+' \<input type="text" name='+inputName+'
size="60"\> \<br/> ');
// ok
//alert('<div id='+divID+'><button id='+buttonID+' name='+buttonID+'
onclick="doCheckbox(1,'+i2+','+nr2+');">Add another checkbox</button></
div>');
// ok
// now put them together
// alert(labeli+' \<input type="text" name='+inputName+'
size="60"\> \<br/> <div id='+divID+'><button id='+buttonID+'
name='+buttonID+' onclick="doCheckbox(1,'+i2+','+nr2+');">Add another
checkbox</button></div>');
// ok
// final test
// alert(labeli+' \<input type="text" name='+inputName+'
size="60"\> \<br/> <div id='+divID+'><button id='+buttonID+'
name='+buttonID+' onclick="document.getElementById('+buttonID
+').style.display=\'none\';doCheckbox(1,'+i2+','+n r2+');">Add another
checkbox</button></div>');
// looks good
/* but the result of
document.getElementById('+buttonID+').style.displa y=\'none\';
is
document.getElementById(chk1).style.display='none' ;
Shouldn't it be
document.getElementById('chk1').style.display='non e';
I fumbled around a bit, couldn't get that output.
*/
newElement.innerHTML = labeli+' \<input type="text"
name='+inputName+' size="60"\> \<br/> <div id='+divID
+'><button id='+buttonID+' name='+buttonID+'
onclick="document.getElementById('+buttonID+').sty le.display=\'none
\';doCheckbox(1,'+i2+','+nr2+');">Add another checkbox</button></
div>';