delimiting parameters in a function call

[Claus Mygind]

I want to create a function call "GetMoreRecs()" on the fly and insert 3 variables as parameters. The values of the variables are stored in an array "p"

td.innerHTML +=    '<input  type="button" style="visibility:'+(( p['cEof'] ) ? 'hidden': 'visible')+'" class="MenuButtonText"  name="Next"  value="Next >>"  onClick="GetMoreRecs(\"'+p['TableName']+'\", \"'+p['Key']+'\", \"'+p['searchValue']+'\");">';
 

The above code does not render the right format. This is the result of what I get.

<input type="button" );="" clas0011king_s01="" ,="" contactkey="" contact="" onclick="GetMoreRecs(" value="&lt;&lt; Prev" name="Prev" class="MenuButtonText" style="visibility: visible;">

I think I am escaping the double quotes like this \"

but as you can see the result is not correct. This is for fireFox only. not interested in any other browser.

[Dormilich]

if you ask me, don’t do it with inline JavaScript. rather go for event handlers or event listeners.

those two codes don’t seem related, there are attributes in the second that are not present in the first.

besides that, there are no associative arrays in JS, use standard objects for that.

[Claus Mygind]

Ok I see what you are saying. Can you create an event listener example for me that is attached to the button I am creating on the fly?

Basically I am using the button's event handler "onclick". But what you are saying is I need to create an object that has the same function within it, then I have to attach that object to the button, I am creating on the fly. (like I said, I get it, but I don't see how I write that code)?

[Claus Mygind]

Ok I got it to work, but I am not sure if this is the cleanest way to write this code.

First I add the buttons dynamically, then I reference the buttons I just added and bind the eventListner to each button:

td.innerHTML  =    ' Browse From&nbsp;<font color="red">'+ p['wkStart'] +'</font> to <font color="red">'+ p['wkEnd'] +'</font><br>';
td.innerHTML +=    '<input class="MenuButtonText" type="button" id="pbPrev" value="<< Prev" style="visibility:'+(( p['cBof'] ) ? 'hidden': 'visible')+'">';
td.innerHTML +=    '<input class="MenuButtonText" type="button" id="pbNext" value="Next >>" style="visibility:'+(( p['cEof'] ) ? 'hidden': 'visible')+'">';
 
var pbutton = document.getElementById("pbPrev");
if (pbutton.addEventListener)
{        
pbutton.addEventListener("click",function(){GetMoreRecs(p['TableName'], p['Key'], p['searchValue1'])},false);
}
 
var pbutton = document.getElementById("pbNext");
if (pbutton.addEventListener)
{
pbutton.addEventListener("click",function(){GetMoreRecs(p['TableName'], p['Key'], p['searchValue2']  )},false);
}
 

[Dormilich]

Ok, an example using the DOM to create a button:

var b = document.createElement("button");
b.type = "button";
b.name = "Next";
b.textContent = "Next >>";
// CSS shouldn’t be inline either
b.className = "MenuButtonText otherStyleClass";
// execute doSomething() on click
b.addEventListener("click", doSomething, false);
parent.appendChild(b);

[Dormilich]

instead of GetMoreRecs(p['TableName'], p['Key'], p['searchValue1']) you can also write

GetMoreRecs(p.TableName, p.Key, p.searchValue1)