Javascript beginner: Trouble with multiple arrays initiated by buttonMsg

Question

I'm having problems with my arrays. My first buttonMsg() displayed the prompt correctly and the input went straight to the text box.

Now I'm having trouble duplicating that same code into my second array.
When I tried nothing would work. I'm thinking it has to do with buttonMsg.

<html>
<head>
    <title></title>
    <script type="text/javascript">
        function buttonMsg(){
            varData = new Array();
            varData[0] = prompt("Please enter first name.","")
            varData[1] = prompt("Please enter last name.","")
            varData[2] = prompt("Please enter phone number.","")
            varData[3] = prompt("Please enter address.","")
            document.getElementsByName('inputbox')[0].value = varData[0]
            document.getElementsByName('inputbox')[1].value = varData[1]
            document.getElementsByName('inputbox')[2].value = varData[2]
            document.getElementsByName('inputbox')[3].value = varData[3]
        }
        function buttonMsg(1){
            varDater = new Array(1);
            varDater[0] = prompt("Please enter first name.","")
            varDater[1] = prompt("Please enter last name.","")
            varDater[2] = prompt("Please enter phone number.","")
            varDater[3] = prompt("Please enter address.","")
            document.getElementsByName('inputbox')[0].value = varDater[0]
            document.getElementsByName('inputbox')[1].value = varDater[1]
            document.getElementsByName('inputbox')[2].value = varDater[2]
            document.getElementsByName('inputbox')[3].value = varDater[3]
        }
    </script>
</head>
<body>
    <table border="1">
        <tr>
            <td>0,0 CustomerID</td>
            <td>1 FirstName</td>
            <td>2 LastName</td>
            <td>3 Phone</td>
            <td>4 Address</td>
        </tr>
        <tr>
            <td>1 Customer1 <input type="button" value="Input" onclick="buttonMsg()"/></td>
            <td><input type="text" name="inputbox" value=""></td>
            <td><input type="text" name="inputbox" value=""></td>
            <td><input type="text" name="inputbox" value=""></td>
            <td><input type="text" name="inputbox" value=""></td>
        </tr>
        <tr>
            <td>2 Customer2 <input type="button" value="Input" onclick="buttonMsg(1)"/></td>
            <td><input type="text" name="inputbox" value=""></td>
            <td><input type="text" name="inputbox" value=""></td>
            <td><input type="text" name="inputbox" value=""></td>
            <td><input type="text" name="inputbox" value=""></td>
        </tr>
        <tr>
            <td>3 Customer3</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>4 Customer4</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

Pluckerpluck · Answer 1 · 2012-02-04T21:37:18.993

Changing the code from:

function buttonMsg(1){
varDater = new Array(1);

to

function buttonMsg1(){
varDater = new Array();

and then calling buttonMsg1(); later should fix the problem.

However I suggest you further research into initializing arrays and how functions work in javascript. As the () in a function are used to send arguments (variables) to later be used in that function. In this scenario they should be left blank.

This site provides a good starting point to help understand functions.

Further looking at your code shows me that you'd also want to change the:

document.getElementsByName('inputbox')[0]

in the second function to

document.getElementsByName('inputbox')[4]

etc for all the values in that second function.

However this is definately not the best method to use for scalability (if you want more than two customers) and I suggest using a function that takes different element names as an argument.

Is that actively discouraged by most people or something you just dislike in general? Also, I just changed it to link to another site that seems much better. — Pluckerpluck, Feb 04 '12 at 21:35
Just followed your link to w3fools and I think I now agree with you. — Pluckerpluck, Feb 04 '12 at 21:41

score 0 · Answer 2 · answered Feb 04 '12 at 21:02

Looks like the problem is that the inputs are all named "inputbox", so really there will be no output difference between the first and second functions. They will both populate the first 4 elements named "inputbox" on the page, so clicking on the second button will still populate the first section's input boxes. It might make more sense to pass in the name of the section's inputs into the function like this:

buttonMsg(inputname){
    var inputs = document.getElementsByName(inputname);
    inputs[0].value = prompt("Please enter first name.","");
    inputs[1].value = prompt("Please enter last name.","");
    inputs[2].value = prompt("Please enter phone number.","");
    inputs[3].value = prompt("Please enter address.","");
}

then have the buttons pass the names of the inputs like this:

<tr>    
    <td>1 Customer1 <input type="button" value="Input" onclick="buttonMsg('inputbox1')" /></td>
    <td><INPUT TYPE="text" NAME="inputbox1" VALUE=""></td>
    <td><INPUT TYPE="text" NAME="inputbox1" VALUE=""></td>
    <td><INPUT TYPE="text" NAME="inputbox1" VALUE=""></td>
    <td><INPUT TYPE="text" NAME="inputbox1" VALUE=""></td>
</tr>

and change out "inputbox1" to different names for each of the items.

score 0 · Answer 3 · edited May 23 '17 at 12:11

The code shouldn't even work. Chrome reports error and halts script execution. The declaration of the second function has an invalid argument variable name.

What characters are valid for JavaScript variable names?

Also, as already stated, there are duplicate names.

If you're allowed to use jQuery, the following might be a more interesting solution:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <title>Example</title>
    <script type="text/javascript">
        (function($){
            $(document).ready(function(){
                $('input.promptInput').bind('click', function() {
                    varData = new Array();
                    varData[0] = prompt("Please enter first name.","")
                    varData[1] = prompt("Please enter last name.","")
                    varData[2] = prompt("Please enter phone number.","")
                    varData[3] = prompt("Please enter address.","")
                    $(this).parents('tr:first').find('input[type="text"]').each(function(i, input){
                        $(input).val(varData[i]);
                    });
                });
            });
        })(jQuery);
    </script>
</head>
<body>
    <table border="1">
        <tr>
            <td>0,0 CustomerID</td>
            <td>1 FirstName</td>
            <td>2 LastName</td>
            <td>3 Phone</td>
            <td>4 Address</td>
        </tr>
        <tr>
            <td>1 Customer1 <input class="promptInput" type="button" value="Input"/></td>
            <td><input type="text" name="customer_1_firstname" value=""></td>
            <td><input type="text" name="customer_1_lastname" value=""></td>
            <td><input type="text" name="customer_1_phone" value=""></td>
            <td><input type="text" name="customer_1_address" value=""></td>
        </tr>
        <tr>
            <td>1 Customer1 <input class="promptInput" type="button" value="Input"/></td>
            <td><input type="text" name="customer_2_firstname" value=""></td>
            <td><input type="text" name="customer_2_lastname" value=""></td>
            <td><input type="text" name="customer_2_phone" value=""></td>
            <td><input type="text" name="customer_2_address" value=""></td>
        </tr>
        <tr>
            <td>3 Customer3</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>4 Customer4</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

Noted. That does look like a spam site. – Plamen Feb 04 '12 at 21:44 — Plamen, Feb 04 '12 at 21:44

Javascript beginner: Trouble with multiple arrays initiated by buttonMsg

3 Answers3