2012-02-04 35 views
0

我的数组有问题。我的第一个buttonMsg()正确显示提示,输入直接进入文本框。Javascript初学者:由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> 

回答

0

从改变的代码:

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

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

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

但是,我建议你进一步研究初始化数组以及函数如何在JavaScript中工作。由于函数中的()用于发送参数(变量),以便稍后在该函数中使用。在这种情况下,他们应该留空。

This site为帮助理解函数提供了一个很好的起点。

而且看你的代码显示了我,你想也想改变:

document.getElementsByName('inputbox')[0] 
第二功能

document.getElementsByName('inputbox')[4] 

等,为在第二个函数所有的值。

但是,这绝对不是用于可伸缩性的最佳方法(如果您想要两个以上的客户),并且我建议使用将不同元素名称作为参数的函数。

+0

-1链接到W3Schools的。糟糕的教育伤害了! – Pierre 2012-02-04 21:33:03

+0

这是大多数人不喜欢的东西吗?或者你一般不喜欢的东西?此外,我只是改变它链接到另一个似乎好得多的网站。 – Pluckerpluck 2012-02-04 21:35:56

+0

只是跟着你的w3fools链接,我想我现在同意你的意见。 – Pluckerpluck 2012-02-04 21:41:19

0

看起来问题是输入全部命名为“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”为每个项目的不同名称。

0

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

What characters are valid for JavaScript variable names?

而且,如前所述,有重名。

如果你被允许使用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> 
+0

-1链接到w3schools。见[this](http://w3fools.com/)。 – Pierre 2012-02-04 21:32:31

+0

已注意。这看起来像一个垃圾邮件网站。 – Plamen 2012-02-04 21:44:08