【发布时间】：2021-03-15 12:35:56
【问题描述】：
我一直在尝试制作一个应该像虚拟图书馆一样运作的网络，您可以在其中添加或删除您已阅读或愿意阅读的书籍。想法是设置一个按钮，打开一种表单，您可以在其中填写必要的信息并按“提交”按钮，以便代码可以创建一个对象并将其推送到数组 与书的信息。但每次我尝试调试代码时我从 HTML 输入的文本返回“” asi 如果字段为空，而它们不是。我真的不知道问题出在哪里，因为我试图改变各种东西，但似乎没有任何效果，而且我已经在其他项目上编写了相同类型的操作并且效果很好。所以我真的很感谢你的帮助，谢谢！ （PD：我不确定对象构造函数和将对象推送到数组的方式是否得到了很好的实现，但如果需要，我愿意稍后自行修复。）
const myLibrary =[];
const titleInput = document.getElementById('title').value;
const authorInput = document.getElementById('author').value;
const pagesInput = document.getElementById('pages').value;
const readInput = document.getElementById('read').value;
const form = document.getElementById('form');
const newBook = document.getElementById('newbook')
const submitBook = document.getElementById('submit');
const iconclose = document.getElementById('iconclose');
newBook.addEventListener('click', function(){
form.style.display = 'inline';
newBook.hidden= true;
})
iconclose.addEventListener('click', function(){
form.style.display = 'none';
newBook.hidden = false;
})
submitBook.addEventListener('click',addBook);
function addBook(){
let newObject = nuevo(titleInput, authorInput, pagesInput, readInput);
return myLibrary.push(newObject);
}
function nuevo(titleInput, authorInput, pagesInput, readInput){
this.title = titleInput,
this.author = authorInput,
this.pages = pagesInput,
this.read = readInput
};#form{
background-color: #E5E5F7;
opacity: 0.5;
background: radial-gradient(circle, transparent 20%, #E5E5F7 20%, #E5E5F7 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #E5E5F7 20%, #E5E5F7 80%, transparent 80%, transparent) 80px 80px, linear-gradient(#0713fa 6.4px, transparent 6.4px) 0 -3.2px, linear-gradient(90deg, #0713fa 6.4px, #E5E5F7 6.4px) -3.2px 0;
background-size: 160px 160px, 160px 160px, 80px 80px, 80px 80px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1.5fr 1fr 1fr 1fr 1fr 1fr 1.5fr 1fr 1fr 1fr;
gap: 0px 0px;
grid-template-areas:
"add-book-form add-book-form add-book-form add-book-form"
"title-label title-label title-label title-label"
"title-input title-input title-input title-input"
"author-label author-label author-label author-label"
"author-input author-input author-input author-input"
"pages-label pages-label pages-label pages-label"
"pages-input pages-input pages-input pages-input"
"readit-label readit-label readit-label readit-label"
"readit-input readit-input readit-input readit-input";
width: 50vw;
position: absolute;
left: 25vw;
border-radius: 30px;
height: 96%;
box-shadow: -1px 14px 25px -2px rgba(71,71,71,0.47);
overflow: hidden;
}
#formtit{
grid-area: add-book-form;
margin-right: 0px;
margin-left: 0px;
padding-left: 8vw;
width: inherit;
font-size: 4vw;
}
#titlelabel{
grid-area: title-label;
padding-left: 3vw;
font-size: 3vw;
}
#title{
grid-area: title-input;
border-radius: 20px;
width: 47vw;
height: 3vw;
box-shadow: -1px 3px 14px -2px rgb(71 71 71 / 47%);
}
#authorlabel{
grid-area: author-label;
padding-left: 3vw;
font-size: 3vw;
}
#author{
grid-area: author-input;border-radius: 20px;
width: 47vw;
height: 3vw;
box-shadow: -1px 3px 14px -2px rgb(71 71 71 / 47%);
}
#pageslabel{
grid-area: pages-label;
padding-left: 3vw;
font-size: 3vw;
}
#pages{
grid-area: pages-input;
border-radius: 20px;
width: 47vw;
height: 3vw;
box-shadow: -1px 3px 14px -2px rgb(71 71 71 / 47%);
}
#readlabel{
grid-area: readit-label;
padding-left: 3vw;
font-size: 3vw;
}
#read{
grid-area: readit-input;
}
#submit{
grid-area: submit-button;
grid-area: submit-button;
position: absolute;
left: 40%;
top: 80%;
height: 10%;
width: 20%;
border-radius: 20px;
}
#iconclose{
position: absolute;
padding-left: 94%;
padding-top: 3%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Library2</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<button id="newbook" >Add newbook</button>
<div style="display: none;" id="form">
<img id="iconclose" src="images/bx-window-close.svg">
<h2 id="formtit" >Add new book</h2>
<label id="titlelabel" for="title">Title:</label><br>
<input type="text" id="title" name="title" placeholder="Name of the book">
<label id="authorlabel" for="author">Author:</label><br>
<input type="text" id="author" name="author" placeholder="Name of the author"><br>
<label id="pageslabel" for="pages">Pages:</label><br>
<input type="number" id="pages" name="pages" placeholder="Number of pages you had read so far"><br>
<label id="readlabel" for="read">Have you read it already?</label><br>
<input type="checkbox" id="read" name="read" value=""><br>
<input id="submit" type="submit" value="Submit Book">
</div>
<script defer src="script.js"></script>
</body>
</html>【问题讨论】：
-
您需要在获取值之前发生提交点击事件。目前，您仅在页面加载时获得值...在用户输入任何内容之前
-
例如，
document.getElementById('title').value应该在addBook函数内部，以便它在您点击提交后获得值 -
谢谢！我会尽快尝试，然后告诉你进展如何！
标签： javascript html forms object input