DHTML Button onclick event issue

I am dynamically building a button but I am having difficulty having this button have an onclick function. The problem is that I have to dynamically build a variable it passes the onclick method.

Here is what I have…


var newButton = document.createElement('input');
newButton.setAttribute('type', 'button');
newButton.setAttribute('value', 'Delete');

Now I have seen 2 different ways this can be accomplished.


newButton.setAttribute("onclick", "removeDIV(Number);");

or

newButton.onclick = function() { removeDIV(Number) };

The problem is that I need to dynamically build Number and the above 2 examples do not work. The second one actually works but I can not get it to work if I have to dynamically add a Number.

For example… this does NOT work.


newButton.onclick = new function( "removeDIV(" + Number + ")" );

Can someone provide me with some assistance on how to build a onclick event into a button using DHTML?

I got this to work, it might be because a Function object has a capital F and you had a lower case one.


<html>
<head>
<script type="text/javascript">
var buttonNumber = 1;

function makeButton() {
	var newButton = document.createElement('input');
	newButton.setAttribute('type', 'button');
	newButton.setAttribute('value', 'Delete ' + buttonNumber);
	newButton.onclick = new Function("removeDIV(" + buttonNumber++ + ");");
	
	document.body.appendChild(newButton);
}

function removeDIV(id) {
	alert(id);
}

window.onload = function() {
	makeButton();
	makeButton();
	makeButton();
}
</script>
</head>
<body></body>
</html>

Having said that, is your button going to be inside the div that you want to remove? You could get rid of the id all together and traverse the DOM to get to the div from the button and then remove it.

Thank you very much for your response but that was not the issue for me. The big difference between what I have and what you posted is that my JavaScript creates the text boxes after the page loads. Yours does it on page load.

Attached is my code. See the addFFDelete function. If you can get it to work, I would very much appreciate you pointing out what I have done wrong.

Thanks


<html>

<head>
<title>Dynamic Text Box Generation</title>

<script language="javascript">

function addFFInfo()
{
   //--- get the last number created
   var lastNumber = document.getElementById('lastNumber');
   lastNumber.value = lastNumber.value + 1;

   addFFShortName(lastNumber);

   addFFMgmtCompany(lastNumber);

   addFFDelete(lastNumber);
}

function addFFShortName(lastNumber)
{
   //--- DIV element will place the text box on the next line and allow it to be deleted
   var divIdName = "myDiv" + lastNumber;
   var newDiv = document.createElement('div');
   newDiv.setAttribute("id", divIdName);

   //--- get the element reference for the FF Short Name
   var elFFShort = document.getElementById("ffShortName");

   //--- build the new text box
   var newText = document.createElement('input');
   newText.setAttribute('type', 'text');
   newText.setAttribute('name', 'ffShortNameVal');
   newText.setAttribute('id', 'ffShortNameVal');
   newText.setAttribute('size', 15);

   //--- maxlength does not work - will handle with Java
   newText.setAttribute('maxlength', 15);

   //--- add the text box to the DIV element
   newDiv.appendChild( newText );

   //--- add the DIV element box to the element node
   elFFShort.appendChild( newDiv );
}

function addFFMgmtCompany(lastNumber)
{
   //--- DIV element will place the text box on the next line and allow it to be deleted
   var divIdName = "myDiv" + lastNumber;
   var newDiv = document.createElement('div');
   newDiv.setAttribute("id", divIdName);

   //--- get the element reference for the FF Short Name
   var elFFMgmt = document.getElementById("ffMgmt");

   //--- build the new text box
   var newText = document.createElement('input');
   newText.setAttribute('type', 'text');
   newText.setAttribute('name', 'ffMgmtVal');
   newText.setAttribute('id', 'ffMgmtVal');
   newText.setAttribute('size', 8);

   //--- maxlength does not work - will handle with Java
   newText.setAttribute('maxlength', 8);

   //--- add the text box to the DIV element
   newDiv.appendChild( newText );

   //--- add the DIV element box to the element node
   elFFMgmt.appendChild( newDiv );
}

function addFFDelete(lastNumber)
{
   //--- DIV element will place the text box on the next line and allow it to be deleted
   var divIdName = "myDiv" + lastNumber;
   var newDiv = document.createElement('div');
   newDiv.setAttribute("id", divIdName);



   //--- build the new text box
   var newButton = document.createElement('input');
   newButton.setAttribute('type', 'button');
   newButton.setAttribute('value', 'Delete');

   //---*** this line is not working ***---
   newButton.onclick = new Function("removeDIV(" + lastNumber + ");");

   //newButton.onclick = function() { removeDIV( document.getElementById('lastNumber') ) };

   //newButton.setAttribute("onclick", "removeDIV(1);");

   //newButton.onclick = new function( "removeDIV(" + lastNumber + ")" );

   //newButton.onclick = function() { removeDIV() };


   //--- get the element reference for the Delete link
   var elFFDelete = document.getElementById("ffDelete");

   //--- add the link to the DIV element
   newDiv.appendChild( newButton );

   elFFDelete.appendChild( newDiv );
}

function removeDIV(id)
{
   alert("id = " + id);
}

function buildValues()
{
   buildFFVPMGMT();

   buildMultipleShortNames();
}

function buildFFVPMGMT()
{
   var commaDelimited;

   //--- get the element reference for the FF Mgmt Name array
   var elFFMgmtListVal = document.getElementsByName("ffMgmtVal");

   //--- build first value
   commaDelimited = elFFMgmtListVal[0].value

   //--- loop through each array value
   for ( var i = 1; i < elFFMgmtListVal.length; i++ )
   {
      commaDelimited = commaDelimited + "," + elFFMgmtListVal[i].value
   }

   alert("commaDelimited = " + commaDelimited);
}

function buildMultipleShortNames()
{
   var commaDelimited;

   //--- get the element reference for the FF Mgmt Name array
   var elFFMgmtListVal = document.getElementsByName("ffMgmtVal");

   //--- get the element reference for the FF Short Name array
   var elFFShortListVal = document.getElementsByName("ffShortNameVal");

   //--- build first value
   commaDelimited = elFFMgmtListVal[0].value + "_SHORT_NAME=" + elFFShortListVal[0].value

   //--- loop through each array value
   for ( var i = 1; i < elFFMgmtListVal.length; i++ )
   {
      commaDelimited = commaDelimited + "," + elFFMgmtListVal[i].value + "_SHORT_NAME=" + elFFShortListVal[i].value
   }

   alert("commaDelimited = " + commaDelimited);
}

</script>

</head>

<body>

   <table cellpadding="0" cellspacing="0" border="0">
      <tr>
         <td colspan="4" align="Center">
            <a href="javascript: addFFInfo();">Add additional</a>
         </td>
      </tr>
      <tr>
         <td colspan="4" height="5"></td>
      </tr>
      <tr>
         <td valign="Top">
            Field 1 &nbsp;
         </td>
         <td id="ffMgmt">
            <input type="text" name="ffMgmtVal" id="ffMgmtVal" size="8" maxlength="8">
         </td>
         <td valign="Top">
            &nbsp; Field 2 &nbsp;
         </td>
         <td id="ffShortName">
            <input type="text" name="ffShortNameVal" id="ffShortNameVal" size="15" maxlength="15">
         </td>
         <td id="ffDelete">
            <input type="button" onclick="javascript: removeDIV(0);" value="Delete" id="ffDeleteVal">
         </td>
      </tr>
   </table>

   <p>

   <a href="javascript: buildValues()">Test</a>

   <input type="hidden" value="1" id="lastNumber" />

</body>

</html>

OK… I figured it out… the problem was not with my onclick event. It was the lastNumber value I was trying to use. In the addFFInfo function I grabbed the reference to the object lastNumber instead of the value of last number and that was causing my problem when I added the variable lastNumber to my onclick event as an attribute to my JavaScript.

Here is what I changed to get it to work.

var lastNumber = document.getElementById(‘lastNumber’).value;

Here’s another way of doing it a little easier. You don’t need all those ids really.


<html>

<head>
<title>Dynamic Text Box Generation</title>

<script language="javascript">

function buildValues()
{
   buildFFVPMGMT();

   buildMultipleShortNames();
}

function buildFFVPMGMT()
{
   var commaDelimited;

   //--- get the element reference for the FF Mgmt Name array
   var elFFMgmtListVal = document.getElementsByName("ffMgmtVal");

   //--- build first value
   commaDelimited = elFFMgmtListVal[0].value

   //--- loop through each array value
   for ( var i = 1; i < elFFMgmtListVal.length; i++ )
   {
      commaDelimited = commaDelimited + "," + elFFMgmtListVal[i].value
   }

   alert("commaDelimited = " + commaDelimited);
}

function buildMultipleShortNames()
{
   var commaDelimited;

   //--- get the element reference for the FF Mgmt Name array
   var elFFMgmtListVal = document.getElementsByName("ffMgmtVal");

   //--- get the element reference for the FF Short Name array
   var elFFShortListVal = document.getElementsByName("ffShortNameVal");

   //--- build first value
   commaDelimited = elFFMgmtListVal[0].value + "_SHORT_NAME=" + elFFShortListVal[0].value

   //--- loop through each array value
   for ( var i = 1; i < elFFMgmtListVal.length; i++ )
   {
      commaDelimited = commaDelimited + "," + elFFMgmtListVal[i].value + "_SHORT_NAME=" + elFFShortListVal[i].value
   }

   alert("commaDelimited = " + commaDelimited);
}

function cloneIt() {
	var cloneThis = document.getElementById("cloneMe");
	var theClone = cloneThis.cloneNode(true);
	
	// remove the id so we don't duplicate
	theClone.setAttribute("id","");

	// get rid of the values in the cloned textboxes
	var inputs = theClone.getElementsByTagName("input");
	for( var i=0; i < inputs.length; i++ ) {
		if( inputs[i].type == "text" ) {
			inputs[i].value = "";
		}
	}
	
	cloneThis.parentNode.appendChild(theClone);
}

function removeMe(obj) {
	var theTR = obj.parentNode.parentNode;
	
	// don't allow the default tr to be removed
	if( theTR.getAttribute("id") != "cloneMe" ) {
		theTR.parentNode.removeChild(theTR);
	}
}

</script>

</head>

<body>

   <table cellpadding="0" cellspacing="0" border="0">
      <tr>
         <td colspan="4" align="Center">
            <a href="blah" onclick="cloneIt();return false;">Add additional</a>
         </td>
      </tr>
      <tr>
         <td colspan="4" height="5"></td>
      </tr>
      <tr id="cloneMe">
         <td valign="Top">
            Field 1 &nbsp;
         </td>
         <td>
            <input type="text" name="ffMgmtVal" size="8" maxlength="8" />
         </td>
         <td>
            &nbsp; Field 2 &nbsp;
         </td>
         <td>
            <input type="text" name="ffShortNameVal" size="15" maxlength="15"/>
         </td>
         <td>
            <input type="button" onclick="removeMe(this);" value="Delete"/>
         </td>
      </tr>
   </table>

   <p>

   <a href="blah" onclick="buildValues();return false;">Test</a>

</body>

</html>

Thank you for the response. I am learning more and more about what JavaScript can do. After a peer code review, I decided to change my design. Instead of using text boxes, I changed my design to use a listbox (<select> in HTML). I took me 1/8 of the time to code it then my first example. The select object works just like an array so it took care of a lot of the work for me.