我的 html 代码中的输入错误意外结束

Question

我正在用 html 和 jquery 制作一个迷你项目（顺便说一句，我还是个学生，所以我的编程知识并不多）。

当我在编程时，我收到一个错误说unexpected end of input 我认为这是一个语法错误，所以我检查了我的代码，但是当我检查它时没有错误，我希望你们能帮助我解决这个问题。我把我的代码放在下面（分别是jquery一个html） 谢谢！

var data = "";
const arr = [];
$(document).ready(function() {
    $("button").click(function(){
        var subjects = [];
        $.each($("input[name='subject']:checked"), function(){            
        subjects.push($(this).val());
        
        var skills = [];
        $.each($("input[name='skill']:checked"), function(){            
        skills.push($(this).val());
   });
        //alert("My chosen subjects are: " + subjects.join(", "));
        //alert("My chosen skills are: " + skills.join(", "));
        var email = $("#email").val();
        var password = $("#password").val();
        var dob = $("#dob").val();
        var gender = $("#gender").val();
        var address = $("#address").val();
        var city = $("#city").val();
        //var subjects = [];
        console.log("This is the email:", email);
        console.log("This is the password:", password);
        console.log("This is the date of birth:", dob);
        console.log("This is the gender:",  gender);
        console.log("This is the address:",  address);
        console.log("This/These is/are the subject/s:",  subjects)
        console.log("This/There is/are the subject/s:", skills)
        data = "Email: " + email + ", " + "Password: " + password + ", " + "Date Of Birth: " + dob + ", " + "Gender: " + gender + ", " + "Address: " + address + ", " + "City: " + city + ", " + "Subjects: " + subjects.join(", ") + ", " + "Skills: " + skills.join(", ");
        arr.push(data);
        console.log(arr);
    });
});

 <form>
    <label>Email:</label><br>
      <input id="email" type="email" required><br>
      <label>Date Of Birth:</label><br>
      <input id="dob" type="date" required><br>
      <label>Gender:</label><br>
      <select id="gender" required>
        <option>Male</option>
        <option>Female</option>
        <option>other</option>
      </select><br>
      <label>Address:</label><br/>
      <input id="address" type="text" required><br/>
      <label>City:</label><br>
      <input id="city" type="text" required><br> 
    <label>Subject/s</label><br>
    <label><input type="checkbox" value="Math" name="subject"> Math</label>
    <label><input type="checkbox" value="Science" name="subject"> Science</label>
    <label><input type="checkbox" value="SST" name="subject"> SST</label>
    <label><input type="checkbox" value="English" name="subject"> English</label>
    <label><input type="checkbox" value="Computer Science" name="subject"> Computer Science</label>        
    <label><input type="checkbox" value="Kannada" name="subject"> Kannada</label><br>
    <label><input type="checkbox" value="Hindi" name="subject"> Hindi</label><br>
    <label>Skill/s</label><BR>
    <label><input type="checkbox" value="Math" name="skill"> Drawing/Doodling</label>
    <label><input type="checkbox" value="Science" name="skill"> Instrument Playing</label>
    <label><input type="checkbox" value="SST" name="skill"> Dance and/or Music</label>
    <label><input type="checkbox" value="English" name="skill"> sports (any)</label>
    <label><input type="checkbox" value="Computer Science" name="skill"> Computer Science</label>        
    <label><input type="checkbox" value="Kannada" name="skill"> Kannada</label>
    <label><input type="checkbox" value="Hindi" name="skill"> Hindi</label><br>
    <label>Password:</label><br>
    <input type="password" id="password"><br><br>
    <button type="button" value="submit">Submit</button>  
</form>

Answer 1

最后你错过了});。使用 Visual Studio Code 等 IDE 来帮助您发现语法问题。

var data = "";
const arr = [];
$(document).ready(function() {
  $("button").click(function() {
    var subjects = [];
    $.each($("input[name='subject']:checked"), function() {
      subjects.push($(this).val());

      var skills = [];
      $.each($("input[name='skill']:checked"), function() {
        skills.push($(this).val());
      });
      //alert("My chosen subjects are: " + subjects.join(", "));
      //alert("My chosen skills are: " + skills.join(", "));
      var email = $("#email").val();
      var password = $("#password").val();
      var dob = $("#dob").val();
      var gender = $("#gender").val();
      var address = $("#address").val();
      var city = $("#city").val();
      //var subjects = [];
      console.log("This is the email:", email);
      console.log("This is the password:", password);
      console.log("This is the date of birth:", dob);
      console.log("This is the gender:", gender);
      console.log("This is the address:", address);
      console.log("This/These is/are the subject/s:", subjects)
      console.log("This/There is/are the subject/s:", skills)
      data = "Email: " + email + ", " + "Password: " + password + ", " + "Date Of Birth: " + dob + ", " + "Gender: " + gender + ", " + "Address: " + address + ", " + "City: " + city + ", " + "Subjects: " + subjects.join(", ") + ", " + "Skills: " + skills.join(", ");
      arr.push(data);
      console.log(arr);
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <label>Email:</label><br>
  <input id="email" type="email" required><br>
  <label>Date Of Birth:</label><br>
  <input id="dob" type="date" required><br>
  <label>Gender:</label><br>
  <select id="gender" required>
    <option>Male</option>
    <option>Female</option>
    <option>other</option>
  </select><br>
  <label>Address:</label><br/>
  <input id="address" type="text" required><br/>
  <label>City:</label><br>
  <input id="city" type="text" required><br>
  <label>Subject/s</label><br>
  <label><input type="checkbox" value="Math" name="subject"> Math</label>
  <label><input type="checkbox" value="Science" name="subject"> Science</label>
  <label><input type="checkbox" value="SST" name="subject"> SST</label>
  <label><input type="checkbox" value="English" name="subject"> English</label>
  <label><input type="checkbox" value="Computer Science" name="subject"> Computer Science</label>
  <label><input type="checkbox" value="Kannada" name="subject"> Kannada</label><br>
  <label><input type="checkbox" value="Hindi" name="subject"> Hindi</label><br>
  <label>Skill/s</label>
  <BR>
  <label><input type="checkbox" value="Math" name="skill"> Drawing/Doodling</label>
  <label><input type="checkbox" value="Science" name="skill"> Instrument Playing</label>
  <label><input type="checkbox" value="SST" name="skill"> Dance and/or Music</label>
  <label><input type="checkbox" value="English" name="skill"> sports (any)</label>
  <label><input type="checkbox" value="Computer Science" name="skill"> Computer Science</label>
  <label><input type="checkbox" value="Kannada" name="skill"> Kannada</label>
  <label><input type="checkbox" value="Hindi" name="skill"> Hindi</label><br>
  <label>Password:</label><br>
  <input type="password" id="password"><br><br>
  <button type="button" value="submit">Submit</button>
</form>

Answer 2

您的 javascript 函数的大括号放在错误的位置，并且也缺少右大括号。主单击中的某些函数未正确关闭，并且其中声明的变量具有函数范围，因此它们的值在您希望组合所有这些值的末尾不可用。

var data = "";
let arr = [];


$(document).ready(function() {
  var skills = [];
  var subjects = [];

  $("button").click(function() {
    $.each($("input[name='subject']:checked"), function() {
      subjects.push($(this).val());

    });


    $.each($("input[name='skill']:checked"), function() {
      skills.push($(this).val());
    });


    var email = $("#email").val();
    var password = $("#password").val();
    var dob = $("#dob").val();
    var gender = $("#gender").val();
    var address = $("#address").val();
    var city = $("#city").val();

    data = "Email: " + email + ", " + "Password: " + password + ", " + "Date Of Birth: " + dob + ", " + "Gender: " + gender + ", " + "Address: " + address + ", " + "City: " + city + ", " + "Subjects: " + subjects.join(", ") + ", " + "Skills: " + skills.join(", ");
    arr.push(data);
    console.log(data)
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <label>Email:</label><br>
  <input id="email" type="email" required><br>
  <label>Date Of Birth:</label><br>
  <input id="dob" type="date" required><br>
  <label>Gender:</label><br>
  <select id="gender" required>
    <option>Male</option>
    <option>Female</option>
    <option>other</option>
  </select><br>
  <label>Address:</label><br/>
  <input id="address" type="text" required><br/>
  <label>City:</label><br>
  <input id="city" type="text" required><br>
  <label>Subject/s</label><br>
  <label><input type="checkbox" value="Math" name="subject"> Math</label>
  <label><input type="checkbox" value="Science" name="subject"> Science</label>
  <label><input type="checkbox" value="SST" name="subject"> SST</label>
  <label><input type="checkbox" value="English" name="subject"> English</label>
  <label><input type="checkbox" value="Computer Science" name="subject"> Computer Science</label>
  <label><input type="checkbox" value="Kannada" name="subject"> Kannada</label><br>
  <label><input type="checkbox" value="Hindi" name="subject"> Hindi</label><br>
  <label>Skill/s</label>
  <BR>
  <label><input type="checkbox" value="Math" name="skill"> Drawing/Doodling</label>
  <label><input type="checkbox" value="Science" name="skill"> Instrument Playing</label>
  <label><input type="checkbox" value="SST" name="skill"> Dance and/or Music</label>
  <label><input type="checkbox" value="English" name="skill"> sports (any)</label>
  <label><input type="checkbox" value="Computer Science" name="skill"> Computer Science</label>
  <label><input type="checkbox" value="Kannada" name="skill"> Kannada</label>
  <label><input type="checkbox" value="Hindi" name="skill"> Hindi</label><br>
  <label>Password:</label><br>
  <input type="password" id="password"><br><br>
  <button type="button" value="submit">Submit</button>
</form>