在纯Javascript中创建新的对象实例并将其推送到数组_Javascript_Arrays_Constructor_Push

在纯Javascript中创建新的对象实例并将其推送到数组

javascript arrays

在纯Javascript中创建新的对象实例并将其推送到数组,javascript,arrays,constructor,push,Javascript,Arrays,Constructor,Push,我试图创建一个表单，在提交时，使用输入值创建一个新对象，然后将该对象存储在数组中由于某些原因，数组正在“重置”而不保存对象让myLibrary=[] 功能书（标题、作者、页数、阅读）{ this.title=标题 this.author=作者 this.pages=页面 this.read=read myLibrary.push（这个） } 函数检查表（）{ 让name=document.querySelector（'input[name=“title”]”）。值让author=docu

我试图创建一个表单，在提交时，使用输入值创建一个新对象，然后将该对象存储在数组中

由于某些原因，数组正在“重置”而不保存对象

让myLibrary=[]
功能书（标题、作者、页数、阅读）{
this.title=标题
this.author=作者
this.pages=页面
this.read=read
myLibrary.push（这个）
}
函数检查表（）{
让name=document.querySelector（'input[name=“title”]”）。值
让author=document.querySelector（'input[name=“author”]”）。值
让pages=document.querySelector（'input[name=“pages”]”）。值
let read=document.querySelector（'input[name=“read”]”）。已选中
新书（姓名、作者、页数、阅读）
document.getElementById（'library'）。innerText=JSON.stringify（myLibrary）
}
const submit=document.getElementById（'btn1'）
submit.addEventListener（“单击”，检查表单）

点击我！
图书馆：
我不确定，因为我试图说明您的代码实际上存储了对象。要么你的表单刷新页面。。。这可能是原因，但就您提供的代码而言，一切都按预期进行

让myLibrary=[]
功能书（标题、作者、页数、阅读）{
this.title=标题
this.author=作者
this.pages=页面
this.read=read
myLibrary.push（这个）
}
功能检查表（姓名、作者、页面、阅读）
{
新书（姓名、作者、页数、阅读）
}
支票表（“克里斯”、“杰瑞”、“56”、“65”）；
支票表（“肖恩”、“约翰”、“56”、“65”）；
//这两个对象仍然存储。。。
console.log（myLibrary）我不确定，因为我试图说明您的代码实际上存储了对象。要么你的表单刷新页面。。。这可能是原因，但就您提供的代码而言，一切都按预期进行

让myLibrary=[]
功能书（标题、作者、页数、阅读）{
this.title=标题
this.author=作者
this.pages=页面
this.read=read
myLibrary.push（这个）
}
功能检查表（姓名、作者、页面、阅读）
{
新书（姓名、作者、页数、阅读）
}
支票表（“克里斯”、“杰瑞”、“56”、“65”）；
支票表（“肖恩”、“约翰”、“56”、“65”）；
//这两个对象仍然存储。。。
console.log（myLibrary）由于您的html
中有一个表单，您必须防止其默认提交事件导致重新加载带有的页面。例如，您可以更改checkForm（）
并在那里添加e.preventDefault（）
，以防止表单被提交

让myLibrary=[]
功能书（标题、作者、页数、阅读）{
this.title=标题
this.author=作者
this.pages=页面
this.read=read
}
功能添加到图书馆（标题、作者、页面、阅读）{
let book=新书（标题、作者、页数、阅读）
我的图书馆。推（书）
}
let table=document.querySelector（“.table”）；
myLibrary.forEach（函数（e）{
table.innerHTML+=`${e.title}
${e.author}
${e.pages}
${e.read}
`
});
//选择器
let add=document.querySelector（“#add”）
let submit=document.querySelector（“提交”）
功能检查表（e）{
e、 preventDefault（）；//防止提交表单
让name=document.querySelector（'input[name=“title”]”）。值
让author=document.querySelector（'input[name=“author”]”）。值
让pages=document.querySelector（'input[name=“pages”]”）。值
let read=document.querySelector（'input[name=“read”]”）。已选中
addtoLibrary（姓名、作者、页数、阅读）
console.log（myLibrary）；
}
submit.addEventListener（“单击”，检查表单）
html，
身体{
身高：100%；
}
* {
字体系列：Graphik Regular；
}
保险商实验室{
列表样式类型：无；
}
桌子
th，
运输署{
边界塌陷：塌陷；
文本对齐：左对齐；
边框：1px纯黑；
}
桌子{
宽度：100%；
}
运输署，
th{
高度：50px；
填充：10px；
宽度：200px；
最小宽度：100px；
}
th{
背景颜色：灰色；
边缘底部：50px；
}
.标题{
边缘底部：5px；
}
钮扣{
背景色：#4CAF50；
/*绿色的*/
边界：无；
颜色：白色；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
边缘顶部：30px；
}
.pop容器{
文本对齐：居中；
/*显示：无*/
位置：固定；
左：0；
排名：0；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.6）；
}
形式{
背景颜色：灰色；
}
输入{
字体大小：20px；
宽度：300px；
边缘底部：5px；
}







你读过了吗


提交
标题
作者
页
阅读
添加新书
由于您的html
中有一个表单，您必须防止其默认提交事件导致重新加载带有的页面。例如，您可以更改checkForm（）
并在那里添加e.preventDefault（）
，以防止表单被提交

让myLibrary=[]
功能书（标题、作者、页数、阅读）{
this.title=标题
this.author=作者
this.pages=页面
this.read=read
}
功能添加到图书馆（标题、作者、页面、阅读）{
let book=新书（标题、作者、页数、阅读）
我的图书馆。推（书）
}
let table=document.querySelector（“.table”）；
myLibrary.forEach（函数（e）{
table.innerHTML+=`${e.title}
${e.author}
${e.pages}
${e.read}
`
});
//选择器
let add=document.querySelector（“#add”）
let submit=document.querySelector（“提交”）
功能检查表（e）{
e、 preventDefault（）；//防止提交表单
让name=document.querySelector（'input[name=“title”]”）。值
让author=document.querySelector（'input[name=“author”]”）。值
让pages=document.querySelector（'input[name=“pages”]”）。值
let read=document.querySelector（'input[name=“read”]”）。已选中
addtoLibrary（姓名、作者、页码）
<html>
  <header></header>
  <body>
    <div>
        <form id="myForm">
            <label for="title">title:</label><br>
            <input type="text" id="title" name="title" value="title"><br>
            <button id="submit">Submit</button>
        </form>
    </div>
    <script type="text/javascript" src="functions.js"></script>
  </body>
</html>

let myLibrary = [];

function Book(title) {
  this.title = title;
  myLibrary.push(this);
}


function checkForm(){
  let title = document.querySelector('input[name="title"]').value;
  new Book(title);
  myLibrary.forEach(function(element) {
    console.log(element);
  });
}

document.getElementById("myForm").addEventListener(
  'submit',
  function(e) {
    e.preventDefault();
    checkForm();
  }
);