WebUserControl dynamic content?

Question

I have create a WebUserControl which consists for three html controls, tow buttons and one input text. Each of these controls have static id, is that wrong i don't think so. The control events are initialized using javascript, after the control was delivered to the client told me that he wants put Five if this user control on the same page each have different parameters for the event. Any event triggered initializes all the user controls since the javascript takes the TextBox UserID.

Here is the code:

            //Markup code in user control, each control have a static id
            <input id="Text_Output" type="text" runat="server" onkeypress="return saveValue(event);"    />

            <input id="Button_Add" type="button" runat="server" value="ˆ"
                style="width:21px; height:14px;vertical-align:bottom;"   />

            <input id="Button_Subtract" type="button" runat="server" value="ˇ" 
              style="width:21px; height:14px;vertical-align:top;"    />

    //Javascript function Add() in user control
    function Add(incValue, percValue) {

    var outputValue = document.getElementById('<%=Text_Output.ClientID%>').value;
    var incremeantValue = incValue;
    var precsionValue = percValue;

    if (outputValue.indexOf(".") > 0) {
        var total = (parseFloat(outputValue) + parseFloat(incremeantValue));
        document.getElementById('<%=Text_Output.ClientID%>').value = parseFloat(total).toFixed(parseInt(percValue)).toString();
    }
    else {
        if (percValue == 0) {
            document.getElementById('<%=Text_Output.ClientID%>').value = parseInt((parseFloat(outputValue) + parseFloat(incremeantValue)).toString());
        }
        else {
            var total = (parseFloat(outputValue) + parseFloat(incremeantValue));
            document.getElementById('<%=Text_Output.ClientID%>').value = parseFloat(total).toFixed(parseInt(percValue)).toString();
        }
    }
}




//Markup code used in webpage
//This button will connect(initialize) the events for the user control 
<input id="Button1" type="button" value="button" onclick="IntilizeControl()"  /><br />
<My:UserInfoBoxControl ID="JSNumeric_Control" runat="server" />

    //Javasript InilizeControl() function
    function IntilizeControl() {

     var Button_Add = document.getElementById('<%=JSNumeric_Control.FindControl("Button_Add").ClientID %>');
    //Add(IncrementValue,PrecesionValue)
     Button_Add.setAttribute("onclick", "Add(1,1)", '<%=JSNumeric_Control.FindControl("Text_Output").ClientID%>');

    var Button_Subtract = document.getElementById('<%=JSNumeric_Control.FindControl("Button_Subtract").ClientID%>');
    //Subtract(IncrementValue,PrecesionValue)
    Button_Subtract.setAttribute("onclick", "Subtract(1,1)");

    var Text_Output = document.getElementById('<%=JSNumeric_Control.FindControl("Text_Output").ClientID%>');
    alert('<%=JSNumeric_Control.FindControl("Text_Output").ClientID%>');
    Text_Output.setAttribute("onkeyup", "check()");
    Text_Output.value = 0;
}

if i add another user control, it will be initialized with the same everything even if i have changed the ID of the user control on the document.getElementByID part, I want each user control to have it's own client id so each can act on it;s own way ?

Answer 1

   //Send the controlClientID from the source code. 
   function Add(incValue, percValue,controlID) {
    //The controlID.name.replace(/\$/g, '_') will replace the $ sign by the _ character.
    var outputValue = document.getElementById(controlID.name.replace(/\$/g, '_')).value;
    var incremeantValue = incValue;
    var precsionValue = percValue;

    if (outputValue.indexOf(".") > 0) {
        var total = (parseFloat(outputValue) + parseFloat(incremeantValue));
        document.getElementById(controlID.name.replace(/\$/g, '_')).value = parseFloat(total).toFixed(parseInt(percValue)).toString();
    }
    else {
        if (percValue == 0) {
            document.getElementById(controlID.name.replace(/\$/g, '_')).value = parseInt((parseFloat(outputValue) + parseFloat(incremeantValue)).toString());
        }
        else {
            var total = (parseFloat(outputValue) + parseFloat(incremeantValue));
            document.getElementById(controlID.name.replace(/\$/g, '_')).value = parseFloat(total).toFixed(parseInt(percValue)).toString();
        }
    }
}