Fatal编程技术网
  • javascript/
  • Javascript初学者：buttonMsg启动的多个数组的问题

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

javascript html

Javascript初学者：buttonMsg启动的多个数组的问题,javascript,html,Javascript,Html,我的阵列有问题。我的第一个按钮msg（）正确显示了提示，输入直接进入文本框 现在我无法将相同的代码复制到第二个数组中。 当我尝试时，什么都不起作用。我认为这与按钮msg有关 <html> <head> <title></title> <script type="text/javascript"> function buttonMsg(){ varData = new Array()

我的阵列有问题。我的第一个
按钮msg（）
正确显示了提示，输入直接进入文本框

现在我无法将相同的代码复制到第二个数组中。
当我尝试时，什么都不起作用。我认为这与
按钮msg
有关

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


函数按钮msg（）{
varData=新数组（）；
varData[0]=提示（“请输入名字。”，“”）
varData[1]=提示（“请输入姓氏。”，“”）
varData[2]=提示（“请输入电话号码。”，“”）
varData[3]=提示（“请输入地址。”，“”）
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]
}
功能按钮MSG（1）{
varDater=新数组（1）；
varDater[0]=提示（“请输入名字。”，“”）
varDater[1]=提示（“请输入姓氏。”，“”）
varDater[2]=提示（“请输入电话号码。”，“”）
varDater[3]=提示（“请输入地址。”，“”）
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]
}
0,0客户ID
1名
2姓氏
3电话
4地址
1客户1
2客户2
3客户3
4客户4
从以下位置更改代码：

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

然后调用按钮msg1（）；以后应该解决这个问题

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

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

进一步查看您的代码，我发现您还需要更改：

document.getElementsByName('inputbox')[0]
在第二个函数中

document.getElementsByName('inputbox')[4]
对于第二个函数中的所有值，等

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

看起来问题在于输入都被命名为“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>
然后让按钮传递输入的名称，如下所示：

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>


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

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

此外，如前所述，还有重复的名称

如果允许您使用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>


实例
（函数（$）{
$（文档）.ready（函数（）{
$（'input.promptInput'）.bind（'click'，function（）{
varData=新数组（）；
varData[0]=提示（“请输入名字。”，“”）
varData[1]=提示（“请输入姓氏。”，“”）
varData[2]=提示（“请输入电话号码。”，“”）
varData[3]=提示（“请输入地址。”，“”）
$（this）.parents（'tr:first'）.find（'input[type=“text”]”）。each（函数（i，input）{
$（input）.val（varData[i]）；
});
});
});
})（jQuery）；
0,0客户ID
1名
2姓氏
3电话
4地址
1客户1
1客户1
3客户3
4客户4
这是大多数人主动劝阻的，还是你通常不喜欢的？另外，我刚刚把它改为链接到另一个似乎更好的网站。只是按照你的链接到W3傻瓜，我想我现在同意你。注意。这看起来确实像一个垃圾网站。