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

Question

我正在处理这个库项目，并且在其中clear编写了一个不起作用的函数。库函数从表单中获取输入，然后记录“表单已提交”，然后clear函数工作。

问题是该clear功能不起作用。还请描述我们必须在 javascript 文件的 A 行和 B 行中写入的内容。是否需要将此行写2次？：

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：

<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>

标签： javascript

Answer 1

一些东西：

1. 如果使用event.preventDefault()，请在函数开头调用它。我将该调用移至顶部，因为在submit调用您的代码并且窗口会刷新之后，表单事件会传播。

2. 当您定义一个名为 的函数时display，您实际上是在定义一个变量。当您说 时let display = new display()，您实际上是在覆盖display您用来定义该变量的函数。基本上，做let myDisplay = new display()，你不会有问题。

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

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

// display constructor
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) {
  e.preventDefault();

  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 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>