Question

I have an html/css page that is supposed to use an html table layout full of buttons to simulate a t9 keypad layout.

On the page I have a form that includes two text fields. I want to use the table/keypad values to fill in the text fields with numbers via javascript.

I was able to associate a variable with a string that describes which field I wish to fill in with the data, but when I call for the current value of the field I get an error (console.log) that says “cannot read property ‘x’ of ‘undefined’.

Here is my function.

function place(id) {
        var key = ""; //Ensure that this is a string, not number
        key = document.getElementById(id).id; //Get the key value.
        console.log(key);
        var total = ""; //initialize variable.
        console.log(appSettings.padName);
        total = nums.element[appSettings.padName].value; //Grab total.
        //if (total.contains("Click")) total = "";
        console.log(total);
        if (key == "-1") total.slice(0, -1); //backspace.
        else if (key == "-2") numPad(appSettings.padName); //Enter.
        else total += key; //concat to end of the String.
        document.getElementById(appSettings.padName).value += total; //place update.
    }

I am calling this function with the following html

<div id="nums">
<form name="nums">
    <h3>
    Cell number: <input type="text" id="cell" value="" class="inputText"      size="10" onclick="numPad('cell')" name="cell" /><br/><br/>
    <div id='group'>
    Party size: <input type="text" value="" class="inputText" size="10" onclick="numPad('group')" name="group" /><br/><br/>
    </div>
    <input type="submit" value="Submit" class="button" />
</h3>

*note that each field has a different ID system.

The function that gathers the variable is working correctly gathering the div ID in a string format (aka ‘cell’). If you need more information to help I am happy to supply 😛

Answer 1

I’d go about this from a different approach, entirely. The best solution would be to listen for a click event on the <table>, and from there you can grab which key has been clicked, and update one of the inputs accordingly. This practice is called Event Delegation, and it is very efficient.

There are a few faults with your current javascript. Firstly, you don’t need to initialize variables and assign them a “type”, before assigning them your intended values. As well, you don’t need to look up an element by it’s ID simply to grab the ID again, this is wasteful. I notice that you’re also referring to a number of global variables in your function, this is generally bad practice.

Another note, the information that Chris Lively provided you with, re: semi-colons is blatantly false. There are no issues with your original if-statements. You can learn more from this post: http://inimino.org/~inimino/blog/javascript_semicolons