当前位置： 文江博客话题详情

Javascript 初学者：buttonMsg 启动的多个数组出现问题

发布于 2025-01-02 11:54:58 字数 3313 浏览 0 评论 0原文

我的阵列有问题。我的第一个 buttonMsg() 正确显示了提示，并且输入直接进入文本框。

现在我无法将相同的代码复制到我的第二个数组中。
当我尝试时，没有任何效果。我认为这与 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>
原文

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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

满地尘埃落定 2025-01-09 11:54:58

看起来问题是输入都被命名为“inputbox”，所以第一个和第二个函数之间实际上不会有输出差异。它们都将填充页面上名为“inputbox”的前 4 个元素，因此单击第二个按钮仍将填充第一个部分的输入框。将部分输入的名称传递到函数中可能更有意义，如下所示：

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.","");
}

然后让按钮传递输入的名称，如下所示：

<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>

并将“inputbox1”更改为每个项目的不同名称。

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.

回复 原文
绿萝 2025-01-09 11:54:58

将代码从： 更改

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

为

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

然后调用 buttonMsg1();稍后应该解决问题。

不过，我建议您进一步研究初始化数组以及函数在 javascript 中的工作原理。由于函数中的 () 用于发送稍后在该函数中使用的参数（变量）。在这种情况下，它们应该留空。

此站点提供了一个帮助理解函数的良好起点。

进一步查看您的代码表明您还希望将

document.getElementsByName('inputbox')[0]

第二个函数中的：更改为

document.getElementsByName('inputbox')[4]

etc 以获取第二个函数中的所有值。

然而，这绝对不是用于可扩展性的最佳方法（如果您想要两个以上的客户），我建议使用一个将不同元素名称作为参数的函数。

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.

回复 原文
楠木可依 2025-01-09 11:54:58

该代码甚至不应该工作。 Chrome 报告错误并停止脚本执行。
第二个函数的声明具有无效的参数变量名。

哪些字符对 JavaScript 变量名称有效？

另外，如前所述，有是重复的名称。

如果您被允许使用 jQuery，以下可能是一个更有趣的解决方案：

<!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>

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>
回复 原文
~没有更多了~

关于作者

傻比既视感

暂无简介

文章
评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

18058794968

文章 0 评论 0

未名湖

文章 0 评论 0

断舍离

文章 0 评论 0

权

文章 0 评论 0

cyay10

文章 0 评论 0

qq_RdefO0

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文