1
votes

Pousser un objet dans un tableau vide en Javascript ne fonctionne pas

Tentative de création d'une application de favoris en Javascript. J'ai créé un objet signet et un tableau vide "signets" pour stocker le nom et l'URL du site Web. Cependant, le fait de cliquer sur soumettre ne remplit pas le tableau de signets. Il remplace la valeur initiale par la nouvelle valeur dans le formulaire d'entrée

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

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;
}

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

Trouvez ci-dessus ce que j'ai essayé.

javascript arrays javascript-objects

1 commentaires

où est votre onclick pour le bouton de soumission?

3 Réponses :

1
votes

Le tableau de signets est limité à la fonction, il sera donc réinitialisé à chaque fois.

le déclarer en dehors de la fonction 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 commentaires

Merci. J'essayais d'éviter de déclarer des VAR mondiaux non pertinents alors je me suis un peu emporté

1
votes

Vous devez déplacer var bookmarks = [] hors de la fonction, à l'intérieur de la fonction, il se réinitialise à chaque fois que vous appelez votre fonction.

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

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;
}

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

0 commentaires

1
votes

Vous rencontrez ce problème en raison de la façon dont vous avez déclaré votre var bookmarks = []; déplacez-le en dehors de la portée de la fonction, afin qu'il ne se réinitialise pas chaque fois que la fonction est appelée

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

0 commentaires