debugging HTML和JavaScript代码不能正常工作

对于一个学校项目，我需要从用户那里获取我用HTML代码创建的网站的输入。在用户按下“添加新书”提交按钮后，JavaScript应该能够将输入的值存储在变量中并提醒用户，但是，它不起作用。
我找到了一个临时的解决方案，那就是删除除了第一个和最后一个之外的所有表单标签，除了这会打乱我代码的格式，我想知道是否有更好的方法来解决这个问题。我的HTML和JS代码也包括在内。
显示VS代码上的错误消息-

未捕获的TypeError TypeError：无法在onclick（c：\School\Grade 11 Comp Sci\Library Asst\libraryInterface.html：61：184）的addNewBook（c：\School\Grade 11 Comp Sci\Library Asst\addBook.js：4：45）处读取未定义的属性（阅读“值”）无可用调试器，无法发送“变量”

P.S. -JavaScript文件的文件名是'addBook.JS'，HTML和JS文件都保存在同一个文件夹中。我还在body标签的末尾包含了script标签，就像我在网上看到的那样，但它仍然不起作用。
我的HTML代码

<!DOCTYPE HTML>
<html>
<head>
    <!--This is the website's tab display to let the user know which tab they are on-->
    <title>Add a New Book</title>
</head>
<body>
    <!--The following code displays the page's heading-->
    <h1><center>Add A New Book</center></h1>
    <br><br>
    <center>
        <!--The following form asks the library technician to input the book's ID #-->
        <form>
            <label for="bookIDNumL">Book ID #:</label>  <input type="number" name="bookIDNumL" id="bookIDNumL" >
        </form>
        <br>
        <!--The following form asks the library technician to input the book's title-->
        <form>
            <label for="bookTitleL">Book Title:</label>  <input type="text" name="bookTitleL" id="bookTitleL" >
        </form>
        <br>
        <!--The following form asks the library technician to input the book's dewey number-->
        <form>
            <label for="deweyNumL">Dewey #:</label>  <input type="number" name="deweyNumL" id="deweyNumL" min="0">
        </form>
        <br>
        <!--The following form asks the library technician to input the book's author's first and last name-->
        <form>
            <label for="authorNameL">Author Name:</label>  <input type="text" name="authorNameL" id="authorNameL">
        </form>
        <br>
        <!--The following form asks the library technician to input the book's type-->
        <form>
            <label for="bookTypeL">Book Type:</label>  <input type="radio" name="bookTypeL" id="nonFiction">  <label for="nonFiction">Non-Fiction</label>  <input type="radio" name="bookTypeL" id="fiction">  <label for="fiction">Fiction</label>  <input type="radio" name="bookTypeL" id="graphicNovel">  <label for="graphicNovel">Graphic Novel</label>
        </form>
        <br>
        <!--The following form asks the library technician to input the book's publication date-->
        <form>
            <label for="pubDateL">Publication Date:</label> <select id="pubDateL" name="pubDateL">
                <option></option>
                <option value="before 2000">Before 2000</option>
                <option value="2001-2005">2001-2005</option>
                <option value="2006-2010">2006-2010</option>
                <option value="2011-2015">2011-2015</option>
                <option value="2016-2020">2016-2020</option>
                <option value="2021-2023">2021-2023</option>
            </select>
        </form>
        <br>
        <!--The following form asks the library technician to upload an image of the book's cover-->
        <form>
            <label for="bookCoverL">Book Cover:</label>  <input type="file" name="bookCoverL" id="bookCoverL" value="Upload Book Cover Image">
        </form>
    </center>
    <br><br>
    <!--The following code creates a "back to the homepage" as well as a "add a new book" button to allow the library technician to either go back to the homepage or to add the book with the given information above-->
    <form>
        <input type="submit" value="Back to the Homepage" style="height:50px; width:325px; font-size:30px;">
    </form>
    <form>
        <input onclick = "addNewBook(this.form)" type="submit" value="Add A New Book" style="float:right; height:50px; width:250px; position:relative; top:-50px; font-size:30px;">
    </form>
    <!--The following code creates the images on the top right and left of the webpage-->
    <img src="https://pbs.twimg.com/profile_images/665225941057036288/xXpVpaZ__400x400.png" style="float:right; position:relative; top:-475px; left:275px; height:250px; width:250px;">
    <img src="https://pbs.twimg.com/profile_images/665225941057036288/xXpVpaZ__400x400.png" style="float:right; position:relative; top:-475px; left:-750px; height:250px; width:250px;">
    <script type="text/javascript" src="addBook.js"></script>
</body>
</html>

我的JS代码

var libTechBookNum;

function addNewBook(addBookForm) {
libTechBookNum = addBookForm.bookIDNumL.value;
alert(libTechBookNum);
}

HTML代码中有多个表单标记，这可能是导致JavaScript代码出现问题的原因。当有多个表单标记时，每个表单都会在DOM中创建一个单独的表单对象，JavaScript代码可能无法正确访问输入值。
解决此问题的一种方法是使用一个表单标签来 Package 所有输入字段，并删除HTML代码中的其他表单标签。如下所示：

<form>
        <label for="bookIDNumL">Book ID #:</label>  <input type="number" name="bookIDNumL" id="bookIDNumL" >
    
        <!--The following form asks the library technician to input the book's title-->
        <label for="bookTitleL">Book Title:</label>  <input type="text" name="bookTitleL" id="bookTitleL" >
    
        <!--The following form asks the library technician to input the book's dewey number-->
        <label for="deweyNumL">Dewey #:</label>  <input type="number" name="deweyNumL" id="deweyNumL" min="0">
    
        <!--The following form asks the library technician to input the book's author's first and last name-->
        <label for="authorNameL">Author Name:</label>  <input type="text" name="authorNameL" id="authorNameL">
    
        <!--The following form asks the library technician to input the book's type-->
        <label for="bookTypeL">Book Type:</label>  <input type="radio" name="bookTypeL" id="nonFiction"> <label for="nonFiction">Non-Fiction</label>  <input type="radio" name="bookTypeL" id="fiction">
     </form>

debugging HTML和JavaScript代码不能正常工作

1条答案

相关问题

热门标签

最新问答