#javascript #arrays #javascript-objects
#javascript #массивы #javascript-объекты
Вопрос:
Пытаюсь создать приложение для закладок в Javascript. Я создал объект bookmark и пустой массив «bookmarks» для хранения названия веб-сайта и URL-адреса веб-сайта. Однако нажатие на отправку не заполняет массив закладок. Он заменяет начальное значение новым значением в форме ввода
document.getElementById('subButton').addEventListener('click',getFormInput)
function getFormInput(e){
e.preventDefault();
//get input values
var nameInput = document.getElementById('name').value;
var urlInput = document.getElementById('url').value;
//create a bookmark object
var bookmark = {
name: nameInput,
url: urlInput
}
// store bookmark in bookmarks array
var bookmarks = [];
bookmarks.push(bookmark);
console.log(bookmarks)
} body{
background: #EFEFEF
}
.content{
margin: auto;
margin-top: 70px;
width: 600px;
text-align: center;
box-sizing: border-box;
filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
fill: rgba(255,255,255,1);
background: #fff;
padding-top: 30px;
padding-bottom: 30px;
}
input{
border-radius: 3px;
}
input[type="text"]{
color: red;
margin-top: 10px;
padding: 10px;
display: block;
border: none;
filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
fill: rgba(255,255,255,1);
background: #fff;
width: 50%;
margin: auto;
}
#subButton{
width: 30%;
padding: 10px;
margin: auto;
margin-top: 30px;
text-align: center;
border: none;
}
.blue{
background-color: #3D78FF;
color: #fff;
} <div class="content">
<h1>Website Bookmarker</h1>
<form id="form1">
<label for="">Name: </label>
<input type="text" name="" id="name" placeholder="Website">
<br>
<label for="">Url: </label><input type="text" name="" id="url" placeholder="Website url">
<button class="blue" id="subButton" type="button">Submit</button>
</form>
<div id="displayResult">
</div>
</div> Найдите выше то, что я пробовал.
Комментарии:
1. где ваш onclick для кнопки отправки?
Ответ №1:
Массив закладок ограничен функцией, поэтому он будет сбрасываться каждый раз
объявите его вне функции getFormInput
document.getElementById('subButton').addEventListener('click',getFormInput)
var bookmarks = [];
function getFormInput(e){
e.preventDefault();
//get input values
var nameInput = document.getElementById('name').value;
var urlInput = document.getElementById('url').value;
//create a bookmark object
var bookmark = {
name: nameInput,
url: urlInput
}
// store bookmark in bookmarks array
bookmarks.push(bookmark);
console.log(bookmarks)
}
Комментарии:
1. Спасибо. Я пытался избежать объявления нерелевантных глобальных переменных, поэтому я немного увлекся
Ответ №2:
var bookmarks = [] Вам нужно выйти из функции, внутри функции он повторно инициализируется каждый раз, когда вы вызываете свою функцию.
var bookmarks = [];
document.getElementById('subButton').addEventListener('click',getFormInput)
function getFormInput(e){
e.preventDefault();
//get input values
var nameInput = document.getElementById('name').value;
var urlInput = document.getElementById('url').value;
//create a bookmark object
var bookmark = {
name: nameInput,
url: urlInput
}
// store bookmark in bookmarks array
bookmarks.push(bookmark);
console.log(bookmarks)
} body{
background: #EFEFEF
}
.content{
margin: auto;
margin-top: 70px;
width: 600px;
text-align: center;
box-sizing: border-box;
filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
fill: rgba(255,255,255,1);
background: #fff;
padding-top: 30px;
padding-bottom: 30px;
}
input{
border-radius: 3px;
}
input[type="text"]{
color: red;
margin-top: 10px;
padding: 10px;
display: block;
border: none;
filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
fill: rgba(255,255,255,1);
background: #fff;
width: 50%;
margin: auto;
}
#subButton{
width: 30%;
padding: 10px;
margin: auto;
margin-top: 30px;
text-align: center;
border: none;
}
.blue{
background-color: #3D78FF;
color: #fff;
} <div class="content">
<h1>Website Bookmarker</h1>
<form id="form1">
<label for="">Name: </label>
<input type="text" name="" id="name" placeholder="Website">
<br>
<label for="">Url: </label><input type="text" name="" id="url" placeholder="Website url">
<button class="blue" id="subButton" type="button">Submit</button>
</form>
<div id="displayResult">
</div>
</div> Ответ №3:
Вы сталкиваетесь с этой проблемой из-за того, как вы, где вы объявили var bookmarks = []; , перемещаете его за пределы области действия функции, чтобы он не инициализировался повторно при вызове функции
document.getElementById('subButton').addEventListener('click',getFormInput)
var bookmarks = [];
function getFormInput(e){
e.preventDefault();
//get input values
var nameInput = document.getElementById('name').value;
var urlInput = document.getElementById('url').value;
//create a bookmark object
var bookmark = {
name: nameInput,
url: urlInput
}
// store bookmark in bookmarks array
bookmarks.push(bookmark);
console.log(bookmarks)
}