Question

尝试使用Javascript创建书签应用。我创建了一个书签对象和一个空数组“ 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>

在上面找到我尝试过的内容。

Answer 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)
}

Answer 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>

Answer 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)
}

在Javascript中将对象推送到空数组不起作用

3 个答案: