Перенос объекта в пустой массив в Javascript не работает - PullRequest
Новая
       15

Перенос объекта в пустой массив в Javascript не работает

1 голос
/ 15 апреля 2019

Попытка создать приложение для закладок в Javascript. Я создал объект закладки и пустой массив «закладки» для хранения названия сайта и 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>
Найдите выше того, что я пробовал.

Ответы [ 3 ]

1 голос
/ 15 апреля 2019

Вам нужно вывести 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>
1 голос
/ 15 апреля 2019

Вы получаете эту проблему из-за того, как вы, где вы объявили, 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)
}
1 голос
/ 15 апреля 2019

Массив закладок находится в функции, поэтому он будет сбрасываться каждый раз

объявить его вне функции 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)
}
...