Javascript适用于Firefox，但不适用于Chrome

Question

我的JavaScript代码在Firefox中正常工作，但不在Chrome中。在Firefox中，只要选择了该选项，就会显示正确数量的表单（由JavaScript函数内的代码构建），Chrome中没有任何反应。我不知道为什么。我有一段时间没有检查过，因为我主要使用Linux计算机，但我相信IE9也可以。

如果你能帮我找到我的解决方案，我会很感激。顺便说一下，我的确看过另一个类似题目的问题，但似乎没有回答这个问题。

<script type="text/javascript"> 
    function showForms(numForms) 
    { 
     // build the form 
     var form = ""; 
     for(i = 1; i <= numForms; i++) 
     {  
      // define one section of the form (give fields unique names). 
      var formPart = '<fieldset><legend>Add User</legend><label>Full Name:</label><input name="fullname' + i + '" type="text" required="required"" /><label>Email:</label><input name="email' + i + '" type="email" /><label>Phone:</label><input placeholder="1 (123)-123-1234" name="phone' + i + '" type="tel" /><label>Spreadsheet:</label><input name="spreadsheet' + i + '" type="file" /><label>Registration #:</label><textarea name="regnums' + i + '" placeholder="Aircraft registration number(s). Separate each number with a comma."></textarea></fieldset>'; 
      form = form + formPart; 
     } 
     // output the form to the page 
     var output = document.getElementById("output"); 
     output.innerHTML = form + '<input name="numForms" value="' + numForms + '" type="hidden" />'; 
    } 
</script> 

顺便说一句，这个功能是通过<option onclick="showForms(#)">#</option>其中＃是要显示的表格的数量调用。当然，选项位于<select>之内。

非常感谢您的帮助。

编辑：这里是调用脚本，包含HTML，PHP & JavaScript。

<?php 
// include the javascript function to generate the form 
include ('../private/Includes/Scripts/showforms.js'); 

// form handling code 
if (isset($_POST['submit'])) 
{ 
    // make sure the input for the number of users is a number, and less than or 
    // equal to 10 
    if (is_numeric($_POST['numForms']) && $_POST['numForms'] <= 10) 
    { 
     $regCount = $_POST['numForms']; 
    } 

    // initialize array for form data 
    $regData = array(); 
    // fill array with multi-dimentional form data 
    for ($i = 1; $i <= $regCount; $i++) 
    { 
     // get form data and store in temporary variables 
     $fullname = trim($_POST['fullname' . $i]); 
     $email = trim($_POST['email' . $i]); 
     $phone = trim($_POST['phone' . $i]); 
     $spreadsheet = $_POST['spreadsheet' . $i]; 
     $regnums = trim($_POST['regnums' . $i]); 
     // put data in array 
     $regData[$i] = array(
      'username' => '', 
      'fullname' => $fullname, 
      'email' => $email, 
      'phone' => $phone, 
      'spreadsheet' => $spreadsheet, 
      'regnums' => $regnums 
     ); 
     // unset temporary variables 
     unset($invalid, $username, $fullname, $email, $phone, $spreadsheet, $regnums); 
    } 
    $errors = registerUsers($regData); 
    if ($errors[0] == "Some users were not registered due to missing usernames.") 
    { 
     $notes[] = "Some users were not registered due to missing usernames."; 
     unset($errors[0]); 
    } 
    if (!isset($errors)) 
    { 
     $success = true; 
    } 
} 
?> 
<h2 style="margin-top: -9px;">Register Users</h2> 
<p>Use this form to register new users. Usernames and passwords are automatically generated and emailed to their owner's addresses.</p> 
<form enctype="multipart/form-data" method="post"> 

    <fieldset> 
     <legend> 
      Form Setup &amp; Results 
     </legend> 
     <label>No. of User(s):</label> 
     <select onchange="showForms(0)" name="select"> 
      <option selected="selected">- Please Select -</option> 
      <option onclick="showForms(1)">1</option> 
      <option onclick="showForms(2)">2</option> 
      <option onclick="showForms(3)">3</option> 
      <option onclick="showForms(4)">4</option> 
      <option onclick="showForms(5)">5</option> 
      <option onclick="showForms(6)">6</option> 
      <option onclick="showForms(7)">7</option> 
      <option onclick="showForms(8)">8</option> 
      <option onclick="showForms(9)">9</option> 
      <option onclick="showForms(10)">10</option> 
     </select> 
    </fieldset> 
    <div id="output"></div> 
    <input id="submit" name="submit" type="submit" value="Submit" /> 
</form> 

Answer 1

我猜你有多个ID为“output”的元素，因为我在Chrome的堆栈中将这样一个元素附加到此页面上，执行了你的func定义，用8的参数解雇了它，一堆形式。协议栈使用的JQuery所以......

$('body').append('<div id="output"/>'); 

然后剪切和粘贴在控制台来定义FUNC和...

showForms(8); 

您应该在页面底部看到一堆垃圾形式的在堆栈中。另一种可能性是，您没有ID为“输出”的元素

请务必首先检查HTML。总是。这需要很少的时间。如果您的网站上有JQ，请在调用该功能之前执行此操作。

alert($('#output').size()); 

如果不是1，那就是你的问题。

Answer 2

语法错误 - 转义“的HTML字符串

... + '" type="text" required="required"" /> 

使用一些IDE或智能编辑器，将节省您从这些错误

BTW一个把戏你： 。将代码模板置于隐藏状态（display：none）;然后，对于每个节点，将其复制到新节点并更改其ID，并将其放在正确的位置。第二技巧：使用您的服务器端lang支持像PHP的foo []而不是生成ID的数组。 IMO更好的方法。

Answer 3

我有一个类似的问题，最终导致在使用前未定义我的数组。 Firefox似乎更容忍处理未使用var语句显式定义的数组，但Chrome需要定义它们。