Get input.value and push it into array and localStorage in anouther class

JavaScript
1

I have a form with an input and button element. I want to get the value of the input of my Form.js after clicking on the button and push it into the array of my List.js class and into the localStorage.

export default class Form {
    constructor() {
        this._html = this._createHtml();
    }

   // more code...

    getInput(callback) {
        let formInput = document.querySelector("#submit-btn")
        formInput.addEventListener("click", function() {
            let input = document.querySelector("#aufgabe").value;
            callback(input);
        });
    }

    // more code...
}

import Form from './Form.js'

export default class List {
    constructor() {
        this._data = [];
        this._html = this._createHtml();
    }
    
// more code...

    _pushValue() {
        // TODO: push value into localStorage
        this._data = [];
        localStorage.clear();
        let form = new Form();
        form.getInput((inputValue) => {
            this._data.push(inputValue);
            localStorage.setItem("task", JSON.stringify(this._data));
            console.log(this._data);
        });
    }

// more code...

}

If I put the _pushValue methode into my render() mehtode it works, but it renders everytime I try to push something, and the whole array and localStorge gets resettet. How can I achieve my task? I couldn’t find any solution… probably cause of my googleing skills.

Full code => inspiring-fast-3c4rkp - CodeSandbox

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.