Javascript 为什么clear函数在给定代码中不起作用？

我正在处理这个库项目，其中编写了一个

clear

函数，但该函数不起作用。库函数从表单中获取输入，然后记录“表单已提交”，然后

clear

函数工作

问题是

clear

功能不起作用。还请描述我们必须在javascript文件的A行和B行中编写的内容。这行需要写两遍吗

let libraryForm = document.getElementById('libraryForm');

JavaScript:

console.log("here is js.js speaking ")

// function  constructor
function book(name, author, genre) {
    this.name = name;
    this.author = author;
    this.genre = genre;

}

// display constructur
function display() {

}

//  add methords to display prototypes 
//  adding procedure 

display.prototype.add= function () {
    console.log("adding procedures completed  ");

}

// clear function defination 
display.prototype.clear= function () {
    // the below line is line-B
    let libraryForm=document.getElementById('libraryForm');
    libraryForm.reset();    
}

//add submit event listner to libraryForm and line-A is just below 
let libraryForm = document.getElementById('libraryForm');
libraryForm.addEventListener('submit', libraryFormSubmit);

function libraryFormSubmit(e) {
    console.log(" you have submitted library form ");
    let name = document.getElementById('name');
    let author = document.getElementById('author');

    let fiction = document.getElementById('fiction');
    let programming = document.getElementById('programming');
    let cooking = document.getElementById('cooking');
    let genre;
    if (fiction.checked) {
        genre = fiction.value
    } else if (programming.checked) {
        genre = programming.value;
    } else if (cooking.checked) {
        genre = cooking.value;
    }
    let bookobj = new book(name && name.value, author &&author.value, genre);
    console.log(bookobj);
    let display = new display();
    display.add(bookobj)
    display.clear();
    e.preventDefault();
}

HTML:

名称
作者
体裁
小说
计算机程序设计
烹饪
添加书本

有几件事：

如果使用

event.preventDefault（）

，请在函数开头调用它。我将该调用移到顶部，因为表单

submit

事件将在调用代码后传播，窗口将刷新

定义名为

display

的函数时，实际上是在定义一个变量。当您说

let display=new display（）

时，实际上是在覆盖用于定义该变量的

display

函数。基本上，只要做

让myDisplay=newdisplay（）

，您就不会有问题了

console.log（“这里是js.js”）
//函数构造函数
功能书（姓名、作者、类型）{
this.name=名称；
this.author=作者；
这个。流派=流派；
}
//显示构造函数
函数display（）{}
//添加显示原型的方法
//添加程序
display.prototype.add=函数（）{
console.log（“添加程序已完成”）；
}
//明确的功能定义
display.prototype.clear=函数（）{
//下一行是B行
让libraryForm=document.getElementById（'libraryForm'）；
libraryForm.reset（）；
}
//将submit event listner添加到libraryForm，A行就在下面
让libraryForm=document.getElementById（'libraryForm'）；
libraryForm.addEventListener（“提交”，libraryFormSubmit）；
功能库表单提交（e）{
e、 预防默认值（）；
log（“您已经提交了库表单”）；
让name=document.getElementById（'name'）；
让author=document.getElementById（'author'）；
让虚构=document.getElementById（‘虚构’）；
让编程=document.getElementById（'programming'）；
let cooking=document.getElementById（'cooking'）；
让体裁；
如果（虚构，选中）{
类型=小说。价值
}else if（编程。选中）{
类型=编程值；
}否则，如果（烹饪。检查）{
类型=烹饪。价值；
}
let bookobj=新书（名称和名称.value、作者和作者.value、流派）；
控制台日志（bookobj）；
让myDisplay=new display（）；
myDisplay.add（bookobj）
myDisplay.clear（）；
}

名称
作者
体裁
小说
计算机程序设计
烹饪
添加书本

<form id="libraryForm">
    <div class="form-group row">
        <label for="name" class="col-sm-2 col-form-label">name</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="name">
        </div>
    </div>
    <div class="form-group row">
        <label for="author" class="col-sm-2 col-form-label">author</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="author">
        </div>
    </div>
    <fieldset class="form-group">
        <div class="row">
            <legend class="col-form-label col-sm-2 pt-0">genre</legend>
            <div class="col-sm-10">
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="type" id="fiction" value="fiction">
                    <label class="form-check-label" for="fiction">fiction</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="type" id="programming"value="programming">
                    <label class="form-check-label" for="programming">computer programming</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="type" id="cooking" value="cooking">
                    <label class="form-check-label" for="cooking">cooking</label>
                </div>
            </div>
        </div>
    </fieldset>
    <div class="form-group row">
        <div class="col-sm-10">
            <button type="submit" class="btn btn-primary">add book </button>
        </div>
    </div>
</form>