Javascript初學者：由buttonMsg發起的多個陣列的問題

我的數組有問題。我的第一個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>

來源

2012-02-04 Scoob

從改變的代碼：

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

到

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

，然後調用buttonMsg1（）;稍後應該解決這個問題。

但是，我建議你進一步研究初始化數組以及函數如何在JavaScript中工作。由於函數中的（）用於發送參數（變量），以便稍後在該函數中使用。在這種情況下，他們應該留空。

This site爲幫助理解函數提供了一個很好的起點。

而且看你的代碼顯示了我，你想也想改變：

document.getElementsByName('inputbox')[0]

第二功能

到

document.getElementsByName('inputbox')[4]

等，爲在第二個函數所有的值。

但是，這絕對不是用於可伸縮性的最佳方法（如果您想要兩個以上的客戶），並且我建議使用將不同元素名稱作爲參數的函數。

來源

2012-02-04 20:56:28 Pluckerpluck

-1鏈接到W3Schools的。糟糕的教育傷害了！ – Pierre 2012-02-04 21:33:03

這是大多數人不喜歡的東西嗎？或者你一般不喜歡的東西？此外，我只是改變它鏈接到另一個似乎好得多的網站。 – Pluckerpluck 2012-02-04 21:35:56

只是跟着你的w3fools鏈接，我想我現在同意你的意見。 – Pluckerpluck 2012-02-04 21:41:19

看起來問題是輸入全部命名爲「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」爲每個項目的不同名稱。

來源

2012-02-04 21:02:22

該代碼甚至不應該工作。 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>

來源

2012-02-04 21:22:15 Plamen

-1鏈接到w3schools。見[this]（http://w3fools.com/）。 – Pierre 2012-02-04 21:32:31

已注意。這看起來像一個垃圾郵件網站。 – Plamen 2012-02-04 21:44:08

Javascript初學者：由buttonMsg發起的多個陣列的問題

回答

相關問題