Javascript 必需属性问题_Javascript_Html_Forms_Validation_Input

Javascript 必需属性问题

javascript html forms validation input

Javascript 必需属性问题,javascript,html,forms,validation,input,Javascript,Html,Forms,Validation,Input,我已经在表单输入字段中添加了required属性，如果我不导入script.js就可以了，但是一旦导入script.js，表单就开始接受空响应知道它为什么不起作用吗 index.html <body> <h1 class="library-heading"">Book Library</h1> <div class="book-container"></di

我已经在表单输入字段中添加了required属性，如果我不导入script.js就可以了，但是一旦导入script.js，表单就开始接受空响应

知道它为什么不起作用吗

index.html

 <body>
        <h1 class="library-heading"">Book Library</h1>
        <div class="book-container"></div>
        <form class="book-form">
            <input type="text" placeholder="Title" required />
            <input type="text" placeholder="Author" required />
            <input type="number" placeholder="Pages" required />
            <input type="checkbox" value="true" id="Read" />
            <label for="Read">read</label>
            <input type="submit" id="book-submit" name="btn"  />
        </form>
        <button class="book-btn">Add</button>
        <script src="script.js"></script>
    </body>

const btn = document.querySelector(".book-btn");
const form = document.querySelector(".book-form");
const submit = document.querySelector("#book-submit");

function Book(title,author,pages,read)
{
    this.id= title+author;
    this.title = title
    this.author = author
    this.pages = pages
    this.read = read
}

form.style.display = "none";

btn.addEventListener("click",()=>{
    form.style.display = "block";    
})


submit.addEventListener("click",(e)=>{
    e.preventDefault();
    form.style.display = "none";
    const book = new Book(form[0].value,form[1].value,form[2].value,form[3].checked);
    form.reset();
})