Question

I am creating an application that uses the same number pad to fill out two separate text style form values using javascript.

I found out how to gather a div ID for use inside of a function (for say toggling the hide value), but I need to save this value somehow so that I can know which field to put the numbers into when they come in.

I tried using a global variable for this, but it does not seem to work as the ID does not seem to be recorded as a String value.

The code that I am using does toggle the show/hide attribute, but if I use an alert box to pop what the variable I am using as storage is it reads [object HTMLDivElement]

My script looks like this (bear in mind that I am a noob to javascript).

<script type="text/javascript">
    <!--
    keypad.display="none";
    //Classes for the numberpad on the text fields.

        var padName = ""; //Storage for the name of the current pad.

        function numPad(field) {
            var pad = document.getElementById("keypad"); //manipulating pad.
            var ref = document.getElementById(field);//gather the field info.
            if (pad.style.display == "block") { //Open or close?
                pad.style.display = "none"; //Blank out.
                padName = "";   
            }
            else {
                pad.style.display = "block";//Set to refer to correct field.
                padname = ref;
                alert (ref); 
            }
        }

        function click(id) {
            var key = document.getElementById(id);
            var total = padName.value();
            if (key == "Backspace") total.slice(0, -1);
            else if (key == "Enter") numPad("blanck");
            else total += key;
            padName.value = total;
        }
    -->
</script>

Answer 1

// to get the ID by direct property access of the DOM element
var ref = document.getElementById(field).id;

and then ref stores the ID value.

I would suggest:

// create an object to store app-wide settings
// access properties like this: appSettings.propertyName
var appSettings = { padName: "" };

...

var ref = document.getElementById(field).id;
appSettings.padName = ref;

to avoid polluting the global namespace.

To get/set the value of the pad, you’ll need to do this:

// to get
var total = document.getElementById(appSettings.padName).value;

// to set
document.getElementById(appSettings.padName).value = "something";

You should read up on DOM objects and properties.